Question

我正在一个网页上工作，我有一张表，由JSON填充。

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

当我点击＆＃34; vis＆＃34;第一行按钮，它会打开相应的模态。

但是，当我点击后续＆＃34; vis＆＃34;按钮（第二行向下），没有任何反应。

下面是我的代码（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 code）：

<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 s必须是唯一的。

如果出现多次相同的 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 与 {{之间的区别1}} 以便了解您所面临的挑战的性质：只有 id 的第一次出现才会受到影响。

不能使用一个带有多个按钮的模态

1 个答案: