不能使用具有多个按钮的一种模式

Question

我正在处理一个网页，其中有一个由 JSON 填充的表格。

在表格的右侧，我有三 (3) 个号召性用语按钮，如下面的屏幕截图所示：

当我点击第一行的“vis”按钮时，它会打开相应的模态。

但是，当我点击随后的“vis”按钮（向下的第二行）时，什么也没有发生。

以下是我的代码（PHP 循环，以便根据 MySql DB 中的可用数据添加更多行）：

<tr>
    <td><? echo $row['filename']; ?></td>
    <td><? echo $row['cat']; ?></td>
    <td><? echo $row['size']; ?></td>
    <td><? echo $row['usr']; ?></td>
    <td><? echo $row['date']; ?></td>
    <td width="18%">
        <a href="#" class="btn btn-primary" id="openItem" data-toggle="modal" href="#show-dialog" onclick="window.location.hash = '<? echo $row['id'];?>';">Vis</a>
        <a href="#" class="btn btn-success" id="downloadItem" download="">Last ned</a>
        <a href="#" class="btn btn-danger" id="deleteItem" data-toggle="modal" href="#error-dialog" onclick="window.location.hash = '1';">Slett</a>
    </td>
</tr>

我的模态（HTML代码）：

<div class="modal fade" id="show-dialog" style="height: auto; max-height: 500px;">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">x</a>
            <h3>video_raw01.raw</h3>
        </div>
        <div class="modal-body">
            <video width="100%" controls>
                <source src="mov_bbb.mp4" type="video/mp4">
                <source src="mov_bbb.ogg" type="video/ogg">
                Your browser does not support HTML5 video.
            </video> <br>
            <table>
                <tr>
                    <td><a href="#">url:path/to/video/raw</a></td>
                </tr>
            </table>

        </div>
        <div class="modal-footer" style="position: absolute; bottom: 0; float: right; width: 100%;">
            <a href="#" class="btn btn-success btn-modal btn-cancel"  data-dismiss="modal">Last ned</a>
            <a href="#" class="btn" data-dismiss="modal">Lukk</a>
        </div>
    </div>

还有我的 JavaScript 代码（使用 jQuery 库）：

<script>
    $(document).ready(function(){

        $("#openItem").on("click", function(){ $("#show-dialog").modal();});
        $("#deleteItem").on("click", function(){ $("#error-dialog").modal();});
        $('#show-dialog').on('show.bs.modal', function(e) {
            var hash = window.location.hash;   
            console.log("LOG: "+hash);

        });
</script>

是否有任何原因导致后续行按钮上的单击操作不会打开它们各自对应的模态？

Answer 1

TL;DR

是否有任何原因导致后续行按钮上的单击操作不会打开它们各自对应的模态？

是的；因为 id 必须是唯一的。

如果多次出现相同的id （不应该），则只有第一个可以使用并可用于操作。

---

使用类而不是 id 来解决它，如：class="openItem" 代替 id="openItem"。

随后，还应编辑您的脚本以引用适当的模式，如下所示：

<script>
    $(document).ready(function(){

        $(".openItem").on("click", function(){ $("#show-dialog").modal();});
        $(".deleteItem").on("click", function(){ $("#error-dialog").modal();});
        $('.show-dialog').on('show.bs.modal', function(e) {
            var hash = window.location.hash;   
            console.log("LOG: "+hash);

        });
</script>

看看这个answer，再看看this one too，可以很好地了解class和id之间的区别，所以为了了解您所面临挑战的性质：只有第一次出现的 id 会受到影响。