每个列表项的 Jquery 按钮操作

Question

我制作了一份工作清单，并想为每个工作项编写一个动作，但我的代码显然使模组成为列表中的最后一项，我不明白为什么。

有人能帮我吗？

这是 HTML

<div class="joblist">
 <div class="joblist-item">
  <div class="joblist-item-content"> ... </div>
  <div class="joblist-item-cta"><div class="readmore">read more</div></div>
 </div>
 <div class="joblist-item">
  <div class="joblist-item-content"> ... </div>
  <div class="joblist-item-cta"><div class="readmore">read more</div></div>
 </div>
 <div class="joblist-item">
  <div class="joblist-item-content"> ... </div>
  <div class="joblist-item-cta"><div class="readmore">read more</div></div>
 </div>
</div>

这是 Js (Jquery)

<script>
$(document).ready(function(){
    $('.joblist-item').each(function(){
        thisjob = this;
        $('.readmore',thisjob).click( function(){
            $('.joblist-item-content',thisjob).css("background", "red");
        });
    });
});
</script>

Answer 1

您忘记使用let或const （或var ）声明变量。

也把这个工作和this thisjob一起，对我来说没有意义。 为什么要在父母和孩子身上都设置点击事件？

这是我如何使它工作的：

 $(document).ready(function(){ $('.joblist-item').each(function() { $(this).click(function() { let content = $(this).find('.joblist-item-content') $(content).css("background", "red"); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="joblist"> <div class="joblist-item"> <div class="joblist-item-content">... </div> <div class="joblist-item-cta"><div class="readmore">read more</div></div> </div> <div class="joblist-item"> <div class="joblist-item-content">... </div> <div class="joblist-item-cta"><div class="readmore">read more</div></div> </div> <div class="joblist-item"> <div class="joblist-item-content">... </div> <div class="joblist-item-cta"><div class="readmore">read more</div></div> </div> </div>

Answer 2

您正在全局定义thisjob ，因此在每次迭代中，引用都保持在同一个元素（迭代中的最后一个元素），您只需要在其前面加上关键字var 、 let或const ： var thisjob = this

 $(document).ready(function(){ $('.joblist-item').each(function(){ var thisjob = this; $('.readmore', thisjob).on('click', function(){ $('.joblist-item-content', thisjob).css("background", "red"); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="joblist"> <div class="joblist-item"> <div class="joblist-item-content">... </div> <div class="joblist-item-cta"><div class="readmore">read more</div></div> </div> <div class="joblist-item"> <div class="joblist-item-content">... </div> <div class="joblist-item-cta"><div class="readmore">read more</div></div> </div> <div class="joblist-item"> <div class="joblist-item-content">... </div> <div class="joblist-item-cta"><div class="readmore">read more</div></div> </div> </div>