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

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

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>

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

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

jQuery

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

Result

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>