Ajax 代码仅适用于第一个 <li> - Ajax code only working on first <li>

Ajax code only working on first <li>

本文关键字：li 第一个代码适用于 Ajax | 更新日期: 2023-09-27

我有以下代码：

<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 脚本没有问题。

HTML

中的标识符必须是唯一的。切换到 CSS 类以使用类选择器标识元素

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

然后使用

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

您不能两次使用同一个 id。以不同的方式命名每个，或者改用类并执行以下操作：

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