我的每个弹出窗口都显示第一个的内容

Question

我想要 table 每行都有一个编辑和删除按钮的产品。每个编辑按钮都会触发一个弹出窗口，其中包含用于更新产品的表单。每个删除按钮只是一个确认。

我的 mongodb 系列中的每个产品都有一个 table 行。我用 for 循环生成它。

我的问题是每个弹出窗口都与第一行相同。弹出框内的所有数据也来自第一个产品。所以在第 3 行按编辑并按更新实际上会更新第一行。

我正在使用 Bootstrap 4（表格和 Bootstrap 弹出框），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 弹出窗口都有一个隐藏的 ID 字段，该字段在 for 循环中自动填充。

我试过在每个弹出窗口中显示对象 ID，它们都显示 table 中第一个产品的对象 ID。除了更新表单和删除按钮仅影响 table 中的第一个产品外，这让我相信 for 循环中生成的弹出窗口都是相同的，自动填充的 ID 始终是产品的 ID第一个产品。

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

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

Answer 1

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

希望对您有所帮助！

Answer 2

问题不在于每个弹出窗口都相同，问题在于 $('.product-update') return 它找到的第一个元素匹配 class 名称 .product-update。由于您的 for-loop 生成每个带有 .product-update 或 .product-delete 的弹出窗口，jQuery 无法区分它们和 return 它首先找到的弹出窗口，这发生了成为您 table.

第一行的那个

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

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

我的每个弹出窗口都显示第一个的内容

Each of my popovers show the content of the first one

jquery

ejs

bootstrap-4

popper.js