PHP/AJAX 为什么我的 getAttribute 只针对 foreach 代码中的第一行

Question

所以我在这里要做的是显示用户列表。在此列表中，每个用户都有一个按钮，该按钮将两个 ID 发送到我的数据库，这对于数组中的每个用户都是不同的。我通过 ajax 调用发送这些数据，您可以在下面看到。

问题是，该代码仅适用于列表中的第一个用户，而不适用于其他用户。我的猜测是它不能正常工作，因为每个列表项都有相同的 id 名称，所以它只针对第一个带有 .getelementbyid 选择器的项目。

所以我的问题是，是否有任何其他方法可以让按钮分别为每个用户发送 id。

我尝试过使用 .sibling 选择器，但我不确定如何正确实现它。

<div class="content">
<div class="container-fluid">
    </div>
    <div class="row">
    <ul>
        <?php foreach ($module as $row) :?>
            <div class="col-md-8">
                <div class="toggleHolder">
                    <span class="toggler"><span>▾</span>Show More</span>
                    <span class="toggler" style="display:none;"><span>▴</span> Show Less</span>
                </div>
                <li><p id="post" data-id="<?php echo $row['id'] ?>"><?php echo $row['naam'] ?></p></li>

                <div class="showpanel" style="display: none;">
                    <li><p><?php echo $row['beschrijving'] ?></p></li>

                                <?php foreach ($patient as $row2): ?>
                                <div class="col-md-10">
                                        <div class='lists'>
                                            <li class="flex-item">
                                                <p class="text-left border-bottom post2" id="post2" data-id="<?php echo $row2['id'] ?>"><?php echo $row2['voornaam'].' '.$row2['achternaam'];?></p>
                                                <input id="btnSubmit" type="submit" value="Module toewijzen"/>
                                            </li>

                                    </div>
                                </div>
                                <?php endforeach; ?>
                </div>

            </div>
        <?php endforeach; ?>

    </ul>
    </div>
</div>

$(document).ready(function () {
    $("#btnSubmit").on("click", function (e) {
        console.log("clicked");

        // tekst vak uitlezen
        var module_id = document.getElementById("post").getAttribute("data-id");
        var user_id = document.getElementById("post2").getAttribute("data-id");
        // via AJAX update naar databank sturen
        $.ajax({
            method: "POST",
            url: "AJAX/clientmodule.php",
            data: {user_id: user_id,module_id: module_id} //update: is de naam en update is de waarde (value)

        })

            .done(function (response) {

                // code + message
                if (response.code == 200) {

                }
            });

        e.preventDefault();
    });
});

Answer 1

问题是因为您在循环的 HTML 输出中复制了相同的 id。那是无效的。

改为使用类对元素进行分组。然后，您可以使用 DOM 遍历来查找与单击的按钮相关的元素并在发送 AJAX 请求之前检索它们的值。

还请注意，如果您使用$.ajax 的success 属性，则无需检查响应代码是否为200，因为这是有保证的。它也更加健壮，因为 204 也是一个有效的响应，但从技术上讲不会被您的原始逻辑捕获。

最后，您混合使用了 jQuery 和本机方法，最好只使用其中一种方法。要获取元素的data-id 属性，您可以使用data()。

说了这么多，试试这个：

$(function() {
  $(".btnSubmit").on("click", function(e) {
    e.preventDefault();

    var $container = $(this).closest('.col-md-8');
    var module_id = $container.find(".post").data('id');
    var user_id = $container.find(".post2").data('id');

    $.ajax({
      method: "POST",
      url: "AJAX/clientmodule.php",
      data: {
        user_id: user_id,
        module_id: module_id
      },
      success: function() {
        // callback logic here...
      }
    });
  });
});

<div class="container-fluid">
</div>
<div class="row">
  <ul>
    <?php foreach ($module as $row) :?>
      <div class="col-md-8">
        <div class="toggleHolder">
          <span class="toggler"><span>▾</span>Show More</span>
          <span class="toggler" style="display:none;"><span>▴</span> Show Less</span>
        </div>
        <li>
          <p class="post" data-id="<?php echo $row['id'] ?>">
            <?php echo $row['naam'] ?>
          </p>
        </li>
        <div class="showpanel" style="display: none;">
          <li>
            <p>
              <?php echo $row['beschrijving'] ?>
            </p>
          </li>
          <?php foreach ($patient as $row2): ?>
            <div class="col-md-10">
              <div class='lists'>
                <li class="flex-item">
                  <p class="text-left border-bottom post2" data-id="<?php echo $row2['id'] ?>">
                    <?php echo $row2['voornaam'].' '.$row2['achternaam'];?>
                  </p>
                  <input class="btnSubmit" type="submit" value="Module toewijzen" />
                </li>
              </div>
            </div>
          <?php endforeach; ?>
        </div>
      </div>
    <?php endforeach; ?>
  </ul>
</div>

Answer 2

感谢这绝对帮助我朝着正确的方向前进。使用您的代码，所有按钮都开始工作，但我仍然遇到问题，它只发布了第一行的 id。

这就是我最终解决它的方法：

$(function() {
    $(".btnSubmit").on("click", function(e) {
        e.preventDefault();
        console.log("clicked");

        var $container = $(this).closest('.col-md-10');
        var module_id = $container.closest('.col-md-8').find(".post").data('id');
        var user_id = $container.find(".post2").data('id');

        console.log("module : "+module_id);
        console.log("user : "+user_id);

         $.ajax({
            method: "POST",
            url: "AJAX/clientmodule.php",
            data: {
                user_id: user_id,
                module_id: module_id
                },
        success: function() {
    // callback logic here...
          }
      });
   });
});