我的每个弹出框都显示了第一个的内容

Question

我希望有一个产品表，在每一行中都有一个编辑和删除按钮。每个编辑按钮都会触发一个具有更新产品表单的弹出窗口。每个删除按钮只是一个确认。

在mongodb集合中，每个产品都有一个表行。我用for循环生成这个。

我的问题是，每个弹出窗口都与第一行相同。所有的数据内的弹出式以及来自第一个产品。因此，按下第3行的编辑和按下update，实际上将更新第一行。

我使用的引导带4(表和引导程序)，JQuery和EJS。

EJS

<table class="table table-light table-hover">
    <thead class=" thead-light">
        <tr>
            <th scope="col">#</th>
            <th scope="col">ObjectID</th>
            <th scope="col">Name</th>
            <th scope="col">Price</th>
            <th scope="col">Options</th>
        </tr>
    </thead>
    <tbody>
        <% for(var i=0; i < products.length; i++) {%>
        <tr>
            <td>
                <%= i+1 %>
            </td>
            <td>
                <%= products[i]._id.toString() %>
            </td>
            <td>
                <%= products[i].name %>
            </td>
            <td>
                <%= products[i].price %>
            </td>
            <td>
                <button id="product-update" class="product-update btn btn-warning" data-placement="bottom" data-toggle="popover" data-title="Update Product" data-container="body" type="button" data-html="true" href="#" id="login">
                    <span data-feather="edit"></span>
                </button>
                <div id="popover-product-update" class="popover-product-update d-none">
                    <form action="/dashboardproducts/update" method="POST">
                        <div class="form-group">
                            <label for="name">Product Name:</label>
                            <input type="text" class="form-control" name="name">
                        </div>
                        <div class="form-group">
                            <label for="price">Product Price:</label>
                            <input type="text" class="form-control" name="price">
                        </div>
                        <div class="form-group d-none">
                            <label for="id">Product ID:</label>
                            <input type="text" class="form-control" name="id" value="<%= products[i]._id.toString() %>">
                        </div>
                        <button type="submit" class="btn btn-success">Update</button>
                    </form>
                </div>

                <button id="product-delete" class="product-delete btn btn-danger" data-placement="bottom" data-toggle="popover" data-title="Are you sure you want to delete this product?" data-container="body" type="button" data-html="true" href="#" id="login">
                    <span data-feather="trash-2"></span>
                </button>
                <div id="popover-product-delete" class="popover-product-delete d-none">
                    <form action="/dashboardproducts/delete" method="POST">
                        <div class="form-group d-none">
                            <label for="id">Product ID:</label>
                            <input type="text" class="form-control" name="id" value="<%= products[i]._id.toString() %>">
                        </div>
                        <button type="submit" class="btn btn-danger">Yes</button>
                    </form>
                </div>
            </td>
        </tr>
        <% } %>
    </tbody>
</table>

jQuery

$('.product-update').popover({
    html: true,
    content: function() {
        return $('.popover-product-update').html();
    }
});
$('.product-delete').popover({
    html: true,
    content: function() {
        return $('.popover-product-delete').html();
    }
});

如您所见，每个update/delete popover都有一个隐藏的ID字段，该字段在for循环中被自动填充。

我尝试在每个弹出窗口中显示对象id，它们都显示表中第一个产品的对象id。除了update表单和delete按钮仅影响表中的第一个产品外，我还认为在for循环中生成的弹出项都是相同的，并且自动填充的id始终是第一个产品的id。

有人能帮我解决这个问题吗？

我在这里有一个演示：https://thawing-garden-41890.herokuapp.com/dashboardproducts

Answer 1

问题不是每个弹出程序都是相同的，问题是$('.product-update')返回它找到的匹配类名.product-update的第一个元素。由于for-loop使用.product-update或.product-delete生成每个弹出窗口，因此jQuery无法区分它们并返回它首先找到的弹出，而后者恰好属于表的第一行。

为了避免这种情况发生，您需要修改代码以帮助jQuery找到正确的弹出窗口。在您的代码示例中，实现这一目标的最快方法是执行以下操作：

$('.product-update').popover({
    html: true,
    content: function() {
        return $(this).siblings('.popover-product-update').html();
    }
});

Answer 2

$('.product-update').popover({
  html: true,
  content: function() {
    return $(this).siblings('.popover-product-update').html();
  }
});

$('.product-delete').popover({
  html: true,
  content: function() {
    return $(this).siblings('.popover-product-delete').html();
  }
});

希望这对你有帮助！