Question

我正在动态地将内容加载到我的页面中。单击其中一个图像时，我需要取消选中所有其他图像，然后选中已单击的图像的复选框。如果单击图像，复选框文本，我需要这样做。

this包含所有li元素，而不仅仅是已点击的元素。任何人都可以建议我如何识别哪个li元素是触发代码的元素？

$('#colours').click('li', function() {
  $(this).children('li').find('input').prop('checked', false);
  $(this).find('input').prop('checked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="colours">
  <li>
    <label for="">
            <img src="swatch-1.jpg" alt=""><input type="checkbox" value="1"> <span>Red</span>
        </label>
  </li>
  <li>
    <label for="">
            <img src="swatch-2.jpg" alt=""><input type="checkbox" value="2"> <span>Green</span>
        </label>
  </li>
  <li>
    <label for="">
            <img src="swatch-3.jpg" alt=""><input type="checkbox" value="3"> <span>Blue</span>
        </label>
  </li>
</ul>

Answer 1

首先，您似乎正在尝试创建委派事件处理程序，但是您的语法不正确并且是导致问题的原因。您需要将on()与事件名称和选择器一起使用，而不是click。在那里，您可以使用li引用直接选择this，如下所示：

$('#colours').on('click', 'li', function() {
  $('#colours li').find('input').prop('checked', false);
  $(this).find('input').prop('checked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="colours">
  <li>
    <label>
      <img src="swatch-1.jpg" alt="">
      <input type="checkbox" value="1"> 
      <span>Red</span>
    </label>
  </li>
  <li>
    <label>
      <img src="swatch-2.jpg" alt="">
      <input type="checkbox" value="2"> 
      <span>Green</span>
    </label>
  </li>
  <li>
    <label>
      <img src="swatch-3.jpg" alt="">
      <input type="checkbox" value="3">
      <span>Blue</span>
    </label>
  </li>
</ul>

然而，您在此处创建的行为（任何时候只能选择一个复选框）与radio输入元素的标准行为相同。因此，仅仅使用它们会更有意义。这样你根本不需要任何JS代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="colours">
  <li>
    <label>
      <img src="swatch-1.jpg" alt="">
      <input type="radio" name="swatch" value="1">
      <span>Red</span>
    </label>
  </li>
  <li>
    <label>
      <img src="swatch-2.jpg" alt="">
      <input type="radio" name="swatch" value="2">
      <span>Green</span>
    </label>
  </li>
  <li>
    <label>
      <img src="swatch-3.jpg" alt="">
      <input type="radio" name="swatch" value="3">
      <span>Blue</span>
    </label>
  </li>
</ul>

如何获取使用jQuery单击的动态加载元素

1 个答案: