JQuery：多个 div 在表中的特定 ID 上以单个模式显示

Question

我创建了多个段落，以通过表格内的按钮在特定类上以单一模式显示。我在 json 附加中创建了类“dugme_${kurs.id}”，效果很好。每个按钮都有自己独特的类名。

<td><button id="` + kurs.details + `" class="btn button_kurs dugme_${kurs.id}">
        Details</button></td>

这是函数代码：

 $(document).ready(function() {
                let m1 = document.querySelector("#modal1text");
                let m2 = document.querySelector("#modal2text");
                let m3 = document.querySelector("#modal3text");
                let m4 = document.querySelector("#modal4text");
                let m5 = document.querySelector("#modal5text");
                let m6 = document.querySelector("#modal6text");

                $('.dugme_1').click(function() {
                    $(m1).css('display','block');
                });
                $('.dugme_2').click(function() {
                    $(m2).css('display','block');
                });
                $('.dugme_3').click(function() {
                    $(m3).css('display','block');
                });
                $('.dugme_4').click(function() {
                    $(m4).css('display','block');
                });
                $('.dugme_5').click(function() {
                    $(m5).css('display','block');
                });
                $('.dugme_6').click(function() {
                    $(m6).css('display','block');
                });
                $('#modalInfo').on('hidden.bs.modal', function () {
                    $('#modal1text, #modal2text, #modal3text, #modal4text, #modal5text, #modal6text').css('display','none');
                  })
            });

样式应用于每个段落 style="display:none;" 由于某种原因，打开模态时第一次单击时不会显示 #modal1text 中的文本。只在第二个。我仍在学习编码，但我陷入了困境。尝试用谷歌搜索答案，但我找不到类似的答案。

Answer 1

给每个人一个唯一的 ID 或使用数据属性来定位模式。您甚至可以拥有一个模式并更改内容，但我们需要查看更多 HTML 才能做出决定

还要保持一致。为什么使用 document.getElementById AND $("#...") - 使用 jQuery 或使用纯 JS。

$('#modalInfo').on('hidden.bs.modal', () =>  $(".dugme").hide())

$(".dugme").on("click", function() {
  $(`#${this.dataset.target}`).show()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button class="btn button_kurs dugme" data-target="modal1text">Details M1</button>
<button class="btn button_kurs dugme" data-target="modal2text">Details M2</button>
<button class="btn button_kurs dugme" data-target="modal3text">Details M3</button>

<div id="modal1text" hidden>M1 Details</div>
<div id="modal2text" hidden>M2 Details</div>
<div id="modal3text" hidden>M3 Details</div>

Answer 2

你可以试试这个（我评论了我的代码）

 $(document).ready(function() {
    $('button[class*=dugme]').click(function() {
      // get the current number present in class name
      var getBtnClassID = $(this).attr('class').match(/\d+/); 
      // display the associated modal
      $("#modal" + getBtnClassID + "text").css('display','block');
    });

    $('#modalInfo').on('hidden.bs.modal', function () {
        $('[id*=modal]').css('display','none');
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<td><button id=".dugme_1" class="btn button_kurs dugme_1">Details</button></td>
<td><button id=".dugme_2" class="btn button_kurs dugme_2">Details</button></td>
        
<div id="modal1text" style="display:none">modal1text</div>
<div id="modal2text" style="display:none">modal2text</div>