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请求之前检索它们的值。

另请注意，如果您使用success的{{1}}属性，则无需检查响应代码是否为$.ajax，因为它已得到保证。它也更健壮，因为200也是一个有效的响应，但在技术上不会被你的原始逻辑捕获。

最后，您使用了jQuery和本机方法的混合，最好只坚持使用其中一种方法。要获取元素的204属性，您可以使用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...
      }
    });
  });
});

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...
          }
      });
   });
});

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

2 个答案: