Javascript Can'；t使用多个按钮的一种模式

我正在制作一个网页，其中有一个表，由JSON填充

在表的右侧，我有三（3）个行动按钮，如下面的屏幕截图所示：

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

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

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

我的模态（HTML代码）：

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

$（文档）.ready（函数（）{
$（“#openItem”）.on（“单击”，函数（）{$（“#显示对话框”）.modal（）；}）；
$（“#删除项”）。在（“单击”，函数（）{$（“#错误对话框”）.modal（）；}）；
$（'show dialog'）.on（'show.bs.modal'，函数（e）{
var hash=window.location.hash；
log（“log:+hash”）；
});

是否有任何原因导致后续行按钮上的单击操作无法打开相应的模态？

TL；DR

是否有任何原因导致后续行按钮上的单击操作无法打开相应的模态

是；因为ids必须是唯一的

如果同一

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>

$（文档）.ready（函数（）{
$（“.openItem”）.on（“单击”，函数（）{$（“#显示对话框”）.modal（）；}）；
$（“.deleteItem”）.on（“单击”，函数（）{$（“#错误对话框”）.modal（）；}）；
$（'.show dialog'）.on（'show.bs.modal'，函数（e）{
var hash=window.location.hash；
log（“log:+hash”）；
});

---

看看这一点，进一步了解

类和
id
之间的区别，从而了解您所面临挑战的本质：只有id的第一次出现才会受到影响。
这是行不通的，因为我已经在使用类来定义我试着把它改成一门课，不是吗work@StianInstebo：那么你应该使用不同的类。ID应该是唯一的。它肯定会起作用。让我知道结果。谢谢，这很有效，那么我需要找到一种新方法来引导主题链接。谢谢：）@StianInstebo：刚刚更新了我的答案，提供了一份参考资料，以深入了解您面临的挑战的性质。谢谢，我所做的是：“class=”openItem btn btn primary“，这很有效
<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>

<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>

<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>