Quizgum : this

this()

Today we will study about this().
There are the following situations.

situation 1

HTML

<div class="click">Press me and let me say that you pressed me.</div>
<div class="click">Press me and let me say that you pressed me.</div>
<div class="click">Press me and let me say that you pressed me.</div>
<div class="click">Press me and let me say that you pressed me.</div>
<div class="click">Press me and let me say that you pressed me.</div>
<div class="click">Press me and let me say that you pressed me.</div>
<div class="click">Press me and let me say that you pressed me.</div>
<div class="click">Press me and let me say that you pressed me.</div>
<div class="click">Press me and let me say that you pressed me.</div>

CSS

.click{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer}

Examples

Press me and let me say that you pressed me.

There is a situation like this.

$('.click').click(function(){
    $('.click').text('You just clicked me ^ㅡ^');
});

Using the above sources will result in
Let's press anything below

Press me and let me say that you pressed me.

Oh !! Replace everything. I'm asking you to change yourself.

What on earth will you do? Aha there is a way ^^. Right away
Each class is given a different name.

HTML

<div class="click1">Press me and let me say that you pressed me.</div>
<div class="click1">Press me and let me say that you pressed me.</div>
<div class="click2">Press me and let me say that you pressed me.</div>
<div class="click3">Press me and let me say that you pressed me.</div>
<div class="click4">Press me and let me say that you pressed me.</div>
<div class="click5">Press me and let me say that you pressed me.</div>
<div class="click6">Press me and let me say that you pressed me.</div>
<div class="click7">Press me and let me say that you pressed me.</div>
<div class="click8">Press me and let me say that you pressed me.</div>

<div class="click9">Press me and let me say that you pressed me.</div>

A number is added after the class name.
Then the jQuery source

jQuery

$('.click1').click(function(){
    $('.click1').text('You just clicked me ^-^');
});

$('.click2').click(function(){
  $('.click2').text('You just clicked me ^-^');
});

$('.click3').click(function(){
  $('.click3').text('You just clicked me ^-^');
});

$('.click4').click(function(){
  $('.click4').text('You just clicked me ^-^');
});

$('.click5').click(function(){
  $('.click5').text('You just clicked me ^-^');
});

$('.click6').click(function(){
  $('.click6').text('You just clicked me ^-^');
});

$('.click7').click(function(){
  $('.click7').text('You just clicked me ^-^');
});

$('.click8').click(function(){
  $('.click8').text('You just clicked me ^-^');
});

$('.click9').click(function(){
  $('.click9').text('You just clicked me ^-^');
});

CSS

CSS dumbly writes 9

.click1{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click2{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click3{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click4{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click5{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click6{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click7{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click8{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click9{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}

Result

Press me and let me say that you pressed me.

Look at the above result. Only the press changes. ^^ If you don't know this, you will have to enter a huge amount of sources to implement this feature:

<div class="click1">Press me and let me say that you pressed me.</div>
<div class="click2">Press me and let me say that you pressed me.</div>
<div class="click3">Press me and let me say that you pressed me.</div>
<div class="click4">Press me and let me say that you pressed me.</div>
<div class="click5">Press me and let me say that you pressed me.</div>
<div class="click6">Press me and let me say that you pressed me.</div>
<div class="click7">Press me and let me say that you pressed me.</div>
<div class="click8">Press me and let me say that you pressed me.</div>
<div class="click9">Press me and let me say that you pressed me.</div>

$('.click1').click(function(){
    $('.click1').text('You just clicked me ^-^');
});

$('.click2').click(function(){
    $('.click2').text('You just clicked me ^-^');
});

$('.click3').click(function(){
    $('.click3').text('You just clicked me ^-^');
});

$('.click4').click(function(){
    $('.click4').text('You just clicked me ^-^');
});

$('.click5').click(function(){
    $('.click5').text('You just clicked me ^-^');
});

$('.click6').click(function(){
    $('.click6').text('You just clicked me ^-^');
});

$('.click7').click(function(){
    $('.click7').text('You just clicked me ^-^');
});

$('.click8').click(function(){
    $('.click8').text('You just clicked me ^-^');
});

$('.click9').click(function(){
    $('.click9').text('You just clicked me ^-^');
});
.click1{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click2{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click3{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click4{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click5{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click6{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click7{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click8{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
.click9{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}

However, using this() changes the source.

$('.view').click(function(){
    $(this).text('You just clicked me ^-^');
});

To avoid confusion with the test sources above, let's change the class name view to redo.

HTML

<div class="view">Press me and let me say that you pressed me.</div>
<div class="view">Press me and let me say that you pressed me.</div>
<div class="view">Press me and let me say that you pressed me.</div>
<div class="view">Press me and let me say that you pressed me.</div>
<div class="view">Press me and let me say that you pressed me.</div>
<div class="view">Press me and let me say that you pressed me.</div>
<div class="view">Press me and let me say that you pressed me.</div>
<div class="view">Press me and let me say that you pressed me.</div>
<div class="view">Press me and let me say that you pressed me.</div>

CSS

.view{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}

jQuery

$('.view').click(function(){
    $(this).text('You just clicked ^ ㅡ ^');
});

Result

Press me and let me say that you pressed me.

Even if you have the same class when you select the event that triggered the event, only you select it and process it.

Let's type and understand.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>quizgum :: jQuery Course</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
    $('.view').click(function(){
        $(this).text('You just clicked ^ ㅡ ^');
    });
});
</script>
<style>
.view{clear:both; float:left; padding:10px; background:hotpink; cursor:pointer; margin-bottom:5px}
</style>
</head>
<body>
    <div class="view">Press me and let me say that you pressed me</div>
    <div class="view">Press me and let me say that you pressed me</div>
    <div class="view">Press me and let me say that you pressed me</div>
    <div class="view">Press me and let me say that you pressed me</div>
    <div class="view">Press me and let me say that you pressed me</div>
    <div class="view">Press me and let me say that you pressed me</div>
    <div class="view">Press me and let me say that you pressed me</div>
    <div class="view">Press me and let me say that you pressed me</div>
    <div class="view">Press me and let me say that you pressed me</div>
</body>
</html>

QUIZGUM

Coding Class

Quizgum : this

this()

situation 1

HTML

CSS

Examples

HTML

jQuery

CSS

Result

However, using this() changes the source.

HTML

CSS

jQuery

Result

Let's type and understand.