在 data-id 中使用逗号触发模态，在逗号列表中使用具有单个值的锚点

Question

I have been trying to get this working for hours, including many of those hours searching stackoverflow and elsewhere on google. I'm using a rather strange setup via wordpress to iterate a number of bootstrap modals with an HTML anchor value associated with a booth number variable. I have a table with some javascript that, if there is a booth number within a given div, triggers a modal. Generally it's working great, except for one issue: some of these modals have an id value with a comma seperated list. This isn't something I can structurally change right now, so i'm trying to get comma separated values to play nicely with the javascript and grid container i have set up.

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(".container1 > *[data-location]").click(function() {
        var booth = "#" + jQuery(this).data("location");
jQuery(booth).modal({ show: false});
jQuery(booth).modal('show');
        console.log(booth);}); });

here's a small chunk of my grid container:

  <div class="k10" id="k10" data-id="k10" booth-number="710" data-location="710">710</div>
  <div class="k11" id="k11" data-id="k11" booth-number="611" data-location="611">611</div>
  <div class="k12" id="k12" data-id="k12" booth-number=""></div>
  <div class="k13" id="k13" data-id="k13" booth-number="610" data-location="610">610</div>
  <div class="k14" id="k14" data-id="k14" booth-number="511" data-location="511">511</div>
  <div class="k15" id="k15" data-id="k15" booth-number=""></div>
  <div class="k16" id="k16" data-id="k16" booth-number="510" data-location="510">510</div>
  <div class="k17" id="k17" data-id="k17" booth-number="411" data-location="411">411</div>
  <div class="k18" id="k18" data-id="k18" booth-number=""></div>
  <div class="k19" id="k19" data-id="k19" booth-number="410" data-location="410">410</div>
  <div class="k20" id="k20" data-id="k20" booth-number="311" data-location="311">311</div>

and a couple example pieces of my modals:

<div id="613" class="block-3d6e5076-e12d-4c8c-b2e4-185fd546a91a modal fade" tabindex="-1" aria-hidden="true" booth-number="613">
<div id="710, 712" class="block-3d6e5076-e12d-4c8c-b2e4-185fd546a91a modal fade" tabindex="-1" aria-hidden="true" booth-number="710, 712">

the first example being a working one, and the second a non-working one... I am slowly going mad trying to figure this out, i'd love any help y'all can give

Answer 1

712"` using like this is totally not recommended. You need to create custom classes to particular modals and to the buttons where you trigger them. Just try below snippet you will more clear on it.

 $(document).ready(function(){ $(".btn").click(function(){ var modalID = $(this).attr('data-id'); $("."+modalID).modal('show'); }); });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <div class="bs-example"> <button type="button" data-id="709" class="btn btn-sm btn-primary">709</button> <button type="button" data-id="710" class="btn btn-sm btn-primary">710</button> <button type="button" data-id="712" class="btn btn-sm btn-primary">712</button> <div class="modal fade 710 712" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">710 Modal Title</h5> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"> <p>This is a simple Bootstrap modal. Click the "Cancel button", "cross icon" or "dark gray area" to close or hide the modal.</p> </div> </div> </div> </div> <div class="modal fade 709" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">709 Modal Title</h5> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"> <p>This is a simple Bootstrap modal. Click the "Cancel button", "cross icon" or "dark gray area" to close or hide the modal.</p> </div> </div> </div> </div> </div>