Question

我正在学习jquery和练习，作为一个投资组合，我正在制作一个简单的列表网站。我希望能够单击特定列表项旁边的复选框，并将其仅划出该项。我尝试了一些没有用的方法，我不确定这样做的最佳方法是什么，非常感谢任何帮助。

这是我的Html：

<div class="container">
<ul>
  <div id='bigitems'>
    <li>
      <h2 class="listHeader">Big Items</h2>
        <div class="bigappendbuttondiv">
          <button id="bigappendbutton">Append text</button>
          <label for="bigappendbutton" class="appendbutton"><p class="plus">+</p></label>
        </div>
    </li>
    <li class="listitem">
      <div class="checkbox">
        <input type="checkbox" value="1" id="checkboxInput" class="striker" name=""/>
        <label for= "checkboxInput"> </label>
      </div>
    <input type="text" name="" value="" class="listitemtext" >
    </li>
    <li class="listitem">
      <div class="checkbox">
        <input type="checkbox" value="1" id="checkboxInput2" class="striker" name=""/>
        <label for= "checkboxInput2"> </label>
      </div>
    <input type="text" name="" value="" class="listitemtext">
    </li>
    <li class="listitem">
      <div class="checkbox">
        <input type="checkbox" value="1" id="checkboxInput3" class="striker" name=""/>
        <label for= "checkboxInput3"> </label>
      </div>
    <input type="text" name="" value="" class="listitemtext">
    </li>
    <li class="listitem">
      <div class="checkbox">
        <input type="checkbox" value="1" id="checkboxInput4" class="striker" name=""/>
        <label for= "checkboxInput4"> </label>
      </div>
    <input type="text" name="" value="" class="listitemtext">
    </li>
  </ul>
</div>

这是我的Jquery

 $(document).ready(function(){
  $(".striker").click(function(){
    $(".striker").closest("li").addClass("checked")

  });
});

使用它，当我只希望它添加到与复选标记按钮相同的div中的那个时，它会为每个li添加“striker”类。感谢先进的任何帮助。

Answer 1

您必须在此处使用$(this)参考，

 $(document).ready(function(){
  $(".striker").click(function(){
    $(this).closest("li").addClass("checked");
  });
 });

事件处理程序内部的

this将指向触发事件的元素。如果您使用用于绑定事件的选择器，那么它肯定会选择所有元素并执行请求的操作。

Jquery通过特定列表项进行攻击

1 个答案: