Question

我有以下代码：

<ul class='app-tasks'>
  <li class='app-tasks__item'>
    <label class='app-tasks__label'>
      <input id='some' value='1' type='checkbox'/>
      <span>One</span>
      <div class='app-tasks__mark'></div>
    </label>
  </li>
  <li class='app-tasks__item'>
    <label class='app-tasks__label'>
      <input id='some' value='2' type='checkbox'/>
      <span>TWO</span>
      <div class='app-tasks__mark'></div>
    </label>
  </li>
  <li class='app-tasks__item'>
    <label class='app-tasks__label'>
      <input id='some' value='3' type='checkbox'/>
      <span>Three</span>
      <div class='app-tasks__mark'></div>
    </label>
  </li>      
</ul>

li正在从MySQL中获取。下面的代码用于删除它。

$('#some').change(function() {
  if ($(this).is(':checked')) {
    var id = $(this).val();
    var dataString2 = 'id=' + id;
    console.log(id);
    $.ajax({
      type: "GET",
      url: "sub.php",
      data: dataString2,
      success: function() {
        console.log("Okay");
        var s = $('.app-tasks .app-tasks__item').length - 1;
        $('.app-header__title').html('All Tasks (' + s + ')');
      }
    });
    return false;
  }
});

但代码只在第一个li上运行。 PHP脚本没有问题。

Answer 1

HTML中的

Identifiers必须是唯一的。切换到CSS类以使用Class Selector标识元素

 <input class="some" value="1" type="checkbox"/>

然后使用

$('.some').change(function() {
  //Rest of the code
});

Answer 2

您不能两次使用相同的ID。以不同的方式命名每一个，或者使用类而不是：

$('.some').change(function()
{
});

Ajax代码仅适用于第一个<li>

2 个答案: