每个列表项的Jquery按钮操作

Question

我制作了一个作业列表，并希望为每个作业项编程一个操作，但我的代码显然把mods放在了列表的最后一项，我不明白为什么。

有人能帮我吗？

这是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

您正在全局定义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>

Answer 2

您忘记用let或const(或var(声明变量。

把thisjob和this放在一起对我来说没有意义。你为什么要在父母和孩子身上都放一个点击事件？

以下是我如何使其工作的：

$(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>