如何防止引导模态在每个更改事件上显示？

Question

我正在努力将条件逻辑添加到我们商店中的某些产品中，并在用户选择某个选项时显示 Bootstrap 模式。我是事件冒泡的新手，但已将选择框定义为变量并声明了以下代码：

//All the events I want to listen for:

document.body.addEventListener("change", (event) => {

    if (event.target !== orientation && event.target !== brightSwitchVol && event.target !== brightSwitchTone && event.target !== potValue && event.target !== switchType) {

      return;

    }

我还有一个函数来显示模态：

function showModal() {

    $("#product-modal").modal("show");

  }

当选中某些选项时，我在几个不同的选择框上显示了模式。模式为“空白”，我根据选项动态更改文本。问题出在我的选择框上。orientation

 if (orientation.value === "flipped-co") {

      modalHeading.innerHTML = "FLIPPED ORIENTATION NOTE:";

      modalMessage.innerHTML =

        "Please check your existing control cavity to make sure you can use the Flipped Orientation. Some Telecasters have a deeper pocket for the switch, and you cannot reverse the orientation without routing some wood away.";

      showModal();

    }

问题：

当用户从选择框中进行选择时，将显示模式。但是，事件侦听器列表中的下一项显示相同的翻转方向模式内容。我认为问题在于事件侦听器通过每个选择框“循环”，并且由于仍然正确，它显示第一个模态内容，而不是下一个内容。如何防止这种情况发生？flipped-coorientationflipped-co

我试过：

event.stopPropagation()在方向代码下，但这也不起作用。

我还尝试添加一个cookie，以防止模式在被选中后再次显示，但当然，这可以防止模式再次显示在我希望它显示的框中。flipped-co

Answer 1

由于无法使用 dataattributes，您可以创建一个保存数据的数组或对象，并检查所选值是否作为该数组中的键存在。var infoModalData = {&nbsp; opt1: {&nbsp; &nbsp; title: 'Opt 1 Title',&nbsp; &nbsp; text: 'Opt 1 Text',&nbsp; &nbsp; show: true&nbsp; },&nbsp; opt2: {&nbsp; &nbsp; title: 'Opt 2 Title',&nbsp; text: 'Opt 2 Text',&nbsp; &nbsp; show: true&nbsp; },&nbsp; opt3: {&nbsp; &nbsp; title: 'Opt 3 Title',&nbsp; &nbsp; text: 'Opt 3 Text',&nbsp; &nbsp; show: true&nbsp; },};$('select').on('change', function() {&nbsp; let key = $(this).val();&nbsp; if(!(key in infoModalData) || !infoModalData[key].show) {&nbsp; &nbsp; &nbsp;// this value has no data&nbsp; &nbsp; &nbsp;return false;&nbsp; }&nbsp; let $modal = $( '#myModal' );&nbsp; $modal.find('.modal-title').text( infoModalData[key].title );&nbsp; $modal.find('.modal-body').text( infoModalData[key].title );&nbsp; $modal.modal('show');&nbsp; infoModalData[key].&nbsp;});var infoModalData = {&nbsp; &nbsp; opt1: {&nbsp; &nbsp; &nbsp; title: 'Opt 1 Title',&nbsp; &nbsp; &nbsp; text: 'Opt 1 Text',&nbsp; &nbsp; &nbsp; show: true&nbsp; &nbsp; },&nbsp; &nbsp; opt2: {&nbsp; &nbsp; &nbsp; title: 'Opt 2 Title',&nbsp; &nbsp; &nbsp; text: 'Opt 2 Text',&nbsp; &nbsp; &nbsp; show: true&nbsp; &nbsp; },&nbsp; &nbsp; opt3: {&nbsp; &nbsp; &nbsp; title: 'Opt 3 Title',&nbsp; &nbsp; &nbsp; text: 'Opt 3 Text',&nbsp; &nbsp; &nbsp; show: true&nbsp; &nbsp; },};$('select').on('change', function() {&nbsp; let key = $(this).val();&nbsp; if(!(key in infoModalData) || !infoModalData[key].show) {&nbsp; &nbsp; // this value has no data&nbsp; &nbsp; return false;&nbsp; }&nbsp; let $modal = $( '#myModal' );&nbsp; $modal.find('.modal-title').text( infoModalData[key].title );&nbsp; $modal.find('.modal-body').text( infoModalData[key].title );&nbsp; $modal.modal('show');&nbsp; infoModalData[key].show = false;});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/><div class="modal" tabindex="-1" role="dialog" id="myModal">&nbsp; <div class="modal-dialog" role="document">&nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp; <div class="modal-header">&nbsp; &nbsp; &nbsp; &nbsp; <h5 class="modal-title">Modal title</h5>&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="close" data-dismiss="modal" aria-label="Close">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span aria-hidden="true">&times;</span>&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="modal-footer">&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-primary">Save changes</button>&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div><select class="form-control"><option value="" disabled selected>please select an option</option>&nbsp; <option value="opt1">First opt</option>&nbsp; <option value="opt2">Second opt</option>&nbsp; <option value="opt3">Third opt</option>&nbsp; <option value>No Modal</option>&nbsp; <option value>No Modal either</option></select>

Answer 2

感谢您的帮助。我能够通过在我的逻辑中添加一些额外的条件来解决这个问题。由于在用户选择选项之前选择框的默认值为 ，因此我能够创建一些逻辑，例如：value=""if (orientation.value === "flipped-co" && switchType.value === "" && potValue.value === "")这做了我想要的。再次感谢！