Jquery正在删除span对象的类，而不传递Id

Jquery removing class of span object without passing the Id

本文关键字：Id 删除 span 对象 Jquery      更新时间：2023-09-26

我有一个输入标记，在此之前有一个span标记。

<li>
<span class="class1 class2" style="background-position: 0pt 0pt;"></span>
<input id="in1" class="inputclass" type="checkbox" name="in1">
<label for="in1">text here</label>
</li>
<li>
<span class="class1 class2" style="background-position: 0pt 0pt;"></span> 
<input id="in2" class="inputclass" type="checkbox" name="in2">
<label for="in2">text2 here</label>
</li>

当复选框即in1被选中时，我需要从上面的第二个跨度标签中删除class2。我该怎么做？

此外，还有许多输入和跨度标记。请帮忙。

感谢

您可以使用这个：

$('.inputclass:checkbox').on('change', function() {
    $(this)
        .parent() // li tag
        .next() // adjacent li tag
        .children('span')
        .toggleClass('class2', !this.checked);
});

更改后，它会在下一个<li>中找到<span>元素，并根据是否使用.toggleClass()单击它来切换.class2类。

如果选择框被动态添加到文档中，您可以使用这样的事件委派：

$(document).on('change', '.inputclass:checkbox', function() { ... });

在可能的情况下，将document更改为所有复选框中最接近的祖先元素。

$("#in1").change(
  function() {
    if ($(this).is(":checked")) {
      $(this).prev().removeClass("class2");
    }
  }
);

$(".inputclass").change(
  function() {
    if (!($(this).is(":checked"))) {
      $(this).parent().childern(".class2").removeClass("class2");
    }
  }
);

$("li input:checkbox").click(function() {
   $(this).parent().next().find('span').removeClass('class2');
});
相关文章：