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><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
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>COREASUR :: 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>