javascript - 使用 javascript 在 php 循环上构建，类只记录第一个结果

Question

我目前正在构建一个表单，其中的数据是从 PHP Foreach 循环构建的

我正在使用 Javascript，以便我可以进行检查/取消选中复选框的操作将进行 ajax 调用。

现在的问题（使用类名）是，当我单击复选框并控制台记录数据时，每个复选框都会正确触发，但它仅控制台记录第一个表行的数据

因此，如果我的 php 循环构建 5 行，每行都有自己的值和自己的复选框，每个复选框都会触发日志，但它们每个都只记录第一组值。

我在这里做错了什么？

$(".addToLineup").click(function (e) {

  var number = document.getElementsByClassName("number")[0].innerHTML;
  var detail = document.getElementsByClassName("detail")[0].innerHTML;
  var category = document.getElementsByClassName("category")[0].innerHTML;

  updatedata.number = number;
  updatedata.detail = detail;
  updatedata.category = category;

  console.log(updatedata);

  )};

  <form id="saveLineup">
  @foreach($lists as $list)
      <tr style="text-align:center;">
        <td class="number">{{$list['GROUP']}}</td>
        <td class="detail">{{$list['COVER']}}</td>
        <td class="category">{{$list['CATEGORY']}}</td>
        <td><input class="addToLineup" type="checkbox" <?php if ($list['LINE_UP'] == 1) echo "checked='checked'"; ?></td>
      </tr>        
  @endforeach
  </form>

标签： javascriptphp