Question

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

我的问题：我如何修改以下代码才能仅影响被点击的元素而不是所有相同的类。

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>

Answer 2

这是一个简单易行的解决方案：

<div class="level">
   <div class="a editorTile">h</div>
   <div class="a editorTile">g</div>
   <div class="a editorTile">g</div>
   <div class="a editorTile">g</div>
</div>

 $('.editorTile').each(function(){
    $(this).click(function(){
     $(this).text("I am clicked");
   });
 });

或者你想要别的东西，所以你可以问。

Answer 3

您必须生成动态类或id才能将该特定div作为选择器。

另一种解决方法是使用：eq（n）和选择器，如果你知道你必须调用哪个div。

例如在您的情况下： -

<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.editorTile:eq(2)") && $("div.editorTile(4)") gives you second and fourth element.

为此你必须已经知道确切的div命令

JQuery只影响＆＃34;这个＆＃34;同一类的元素

3 个答案:

演示