Question

我想要一个产品表，每行都有一个“编辑”和“删除”按钮。每个编辑按钮都会触发一个弹出窗口，该弹出窗口具有更新产品的表单。每个删除按钮都只是一个确认。

我的mongodb集合中的每个产品都有一个表格行。我使用for循环生成此代码。

我的问题是每个弹出窗口都与第一行相同。弹出窗口中的所有数据也来自第一个产品。因此，在第三行按编辑，然后按更新实际上会更新第一行。

我正在使用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();
    }
});

如您所见，每个更新/删除弹出窗口都有一个隐藏的ID字段，该字段会自动填充到for循环中。

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

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

我在这里有一个演示：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')返回找到的第一个与类名.product-update匹配的元素。由于您的for循环会使用.product-update或.product-delete生成每个弹出窗口，因此jQuery无法区分它们并返回其首先找到的弹出窗口，该碰巧恰好属于第一行桌子上的。

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

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

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

2 个答案: