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

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>

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

$('#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

您不能使用相同的 ID 两次。以不同的方式命名每一个，或者使用类代替并执行：

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

Answer 2

Identifiers in HTML must be unique. Switch to CSS class to identify elements using Class Selector

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

然后使用

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

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

Ajax code only working on first <li>

php

mysql

ajax

jquery

html-lists