Question

我试图创建一个动态表，其中表中的每一行都有一个＆＃34;修改＆＃34;弹出模式的按钮，其中将有一个表单请求信息。

这是我目前的CSHTML代码：

<body>
    <div id="container">
        <h1>Fingerprint Tool</h1>
        <form id="userIdForm" method="post">
            Type in your UserId: <input name="userId" type="number" id="formUserId" />
            <input type="submit" />
        </form>

        @if (Model != null)
        {
            <h2>List of Fingerprints for user</h2>
            <div id="tableDiv">
                <table class="fingerprintTable">
                    <thead>
                        <tr>
                            <th>User ID</th>
                            <th>Fingerprint ID</th>
                            <th>FingerprintGrant ID</th>
                            <th>PaymentType ID</th>
                            <th>Fingerprint</th>
                            <th>IsDeleted</th>
                            <th>Status ID</th>
                            <th>Created Date</th>
                            <th>Updated Date</th>
                            <th>Modify</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var fingerprint in Model.Fingerprints)
                        {
                            <tr>
                                <td id="userId">@fingerprint.UserId</td>
                                <td id="fingerprintId">@fingerprint.FingerprintId</td>
                                <td id="fingerprintGrantId">@fingerprint.FingerprintGrantId</td>
                                <td id="paymentTypeId">@fingerprint.PaymentTypeId</td>
                                <td id="fingerprint">@fingerprint.Fingerprint</td>
                                <td id="isDeleted">@fingerprint.IsDeleted</td>
                                <td id="fingerprintStatusId">@fingerprint.FingerprintStatusId</td>
                                <td id="createdDate">@fingerprint.CreatedDate</td>
                                <td id="updatedDate">@fingerprint.UpdatedDate</td>
                                <td><button id="modifyButton" onclick="modifyFingerprintInfo(@fingerprint.FingerprintId);">Modify</button></td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>

            <div id="myModal" class="modal">

                <!-- Modal content -->
                <div class="modal-content">
                    <span class="close">x</span>
                    <p id="modalHeader"></p>
                </div>

            </div>
        }
    </div>
</body>

这是我的JS文件：

    window.onload = function() {
        $(".modifyButton")
        .click(function() {
            modifyFingerprintInfo($(this).data("fpid"));
        });
    }

    function modifyFingerprintInfo(fingerprintId) {
    // call updateStatus hermes endpoint

    // Get the modal
    var modal = document.getElementById("myModal");
    // Get the button that opens the modal
    var btn = $(".modifyButton");
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    // When the user clicks on the button, open the modal 

    // When the user clicks on <span> (x), close the modal
    span.onclick = function () {
        modal.style.display = "none";
    }
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
        if (event.target === modal) {
            modal.style.display = "none";
        }
    }
    $("#modalHeader").text("Update the status of FingerprintId " + fingerprintId);

}

这是我的CSS代码：

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#container {
    width: 100%;
    position: absolute;
    left: 4px;
}

问题在于，当我单击每行中的“修改”按钮时，第一次单击时，没有任何反应，然后第二次单击它，但仅适用于第一行中的第一个按钮。最重要的是，例如，如果我单击第4行修改按钮，则不会发生任何事情，但是当我单击第1行修改按钮时，它会打印第4行的详细信息。

我不确定发生了什么，所以非常感谢任何帮助！

Answer 1

您可以使用class代替id来识别多个元素。 id属性旨在用于单个元素，如果多个元素具有相同的id，则只会选择1个。

其次，您不希望在click事件处理程序中设置click事件处理程序。我们马上就做完。

我发现您已将此问题标记为jQuery，因此您可以使用：

<button class="modifyButton" data-fpid="1111">Modify</button>

$(".modifyButton").click(function() {
    $("#modalHeader").text("Update the status of FingerprintId " + $(this).data("fpid");
    $("#myModal").show();
});

这表明通过使用id，只有第一个触发：

$("#button").click(function() {
  alert($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Clicked button ONE</button><br /><br />
<button id="button">Clicked button TWO</button><br /><br />
<button id="button">Clicked button THREE</button>

这表明使用class，其中任何一个都会触发：

$(".button").click(function() {
  alert($(this).data("fpid"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" data-fpid="111">Clicked button ONE</button><br /><br />
<button class="button" data-fpid="222">Clicked button TWO</button><br /><br />
<button class="button" data-fpid="333">Clicked button THREE</button>

Answer 2

考虑到您的主要目的，您打算在动态表上找到一个按钮，因此为了能够执行此操作，您的ID也需要是动态的。

假设@ fingerprint.UserId是唯一的，不会在您的商家信息中重复。拥有此唯一标识符，您可以执行以下操作：

<button id="modifyButton_@fingerprint.UserId">Modify</button>

因此，您需要更新您的函数才能正确触发，并从按钮ID中提取唯一标识符。一个可能的解决方案是使用jquery选择器来创建这种动态。

参考：https://api.jquery.com/id-selector/

参考：https://api.jquery.com/attribute-starts-with-selector/

$( "button[id^='modifyButton_']" ).(function);

考虑到您的功能正在被正确触发，现在您可以从按钮ID中提取表格中数据的参考。

参考：https://api.jquery.com/click/

var userId = $(this).attr("id").replace("modifyButton_");

考虑到这个解决方案，您还可以使用动态内容填充模态，从而改善用户体验。

我希望它能帮助您改进解决方案。如有疑问，请告诉我。

onClick仅适用于表格中的第一个按钮

2 个答案: