Question

所以我基本上是在列表项的跨度上更改类这里是一些上下文：

 <li>
    <span class="shopping-item">apples</span>
    <div class="shopping-item-controls">
      <button class="shopping-item-toggle">

我想将其更改为

 <span class="shopping-item__checked"> ...

我现在使用的代码更改了所有列表项。如何仅定位与该按钮下的按钮相关的对象？

有一阵子，我很难瞄准所以我有一种奇怪的方式，就是使用.parent().children('span') 我尝试使用"this"代替"div.shopping-item-controls"）

  $('.shopping-item-toggle').on('click', event => {
    $('div.shopping-item-controls').parent().children('span').attr('class', 'shopping-item__checked');
  })

没有错误消息，但是单击按钮后，所有购物清单项目都会被划掉，而不仅仅是一个。

Answer 1

这应该选择按钮上方的div：

$(this).prev('div.shopping-item-controls').attr('class', 'shopping-item__checked');

Answer 2

您应该这样做：

const $shoppingItemToggle = $('.shopping-item-toggle')

$shoppingItemToggle.on('click', function() {
  $(this).closest('li').find('span').attr('class', 'shopping-item__checked');
})

.shopping-item {
  color: yellow
}
.shopping-item__checked {
  color: cyan
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  <span class="shopping-item">apples</span>
  <div class="shopping-item-controls">
    <button class="shopping-item-toggle">shopping-item-toggle</button>
  </div>
</li>

Answer 3

尝试一下。

 $('.shopping-item-toggle').on('click', function(){

    $( this ).parent().siblings('span').addClass('shopping-item__checked');
});

当我只想更改一个列表项时，使用jquery更改列表项就是更改所有列表项

3 个答案: