javascript - JQuery 仅影响同一类的 "this"元素

Question

我有一堆具有相同类的 html 元素和一个 JQuery click 函数，当我单击其中一个元素时，所有相同的类都会受到此函数的影响。

我的问题:如何修改以下代码以便仅影响单击的元素而不是同一类的所有元素。

jquery

$('.editorTile').click(function(event){
      $(this).data('type', selectedTile);
      $(this).data('imgx', selectedTile_imgX);
      $(this).data('imgy', selectedTile_imgY);          
});

html

<div class="level">
    <div class="a editorTile" ...>
    <div class="a editorTile" ...> // affect only this
    <div class="a editorTile" ...>
    <div class="a editorTile" ...> // or this...
</div>

Answer 1

它已经可以按照您的方式工作，但不会很明显。在此演示中单击每一行。

this 指向函数的所有者，在本例中是恰好被单击的特定元素。一个更技术性的术语是指被点击、悬停等的元素，被称为“事件的起源”。您还可以使用 event.target 属性(类似于 this 但更容易混淆)指向“事件的起源”。演示中的第二个示例展示了 event.target 的使用。

演示

$('.a').click(function(event){
  $(this).css('background', 'red');
});

$('.b').on('click', function(e) {
  $(e.target).css('font-size','36px');
});
  

<div class="levelA">
    <div class="a">this</div>
    <div class="a">is a</div>
    <div class="a">keyword</div>
    <div class="a">it works!</div>
</div>


<div class="levelB">
    <div class="b">event.target</div>
    <div class="b">is a</div>
    <div class="b">property</div>
    <div class="b">of the Event Object</div>
</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>