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

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

  opt1: {

    title: 'Opt 1 Title',

    text: 'Opt 1 Text',

    show: true

  },

  opt2: {

    title: 'Opt 2 Title',

  text: 'Opt 2 Text',

    show: true

  },

  opt3: {

    title: 'Opt 3 Title',

    text: 'Opt 3 Text',

    show: true

  },

};

$('select').on('change', function() {

  let key = $(this).val();

  if(!(key in infoModalData) || !infoModalData[key].show) {

     // this value has no data

     return false;

  }

  let $modal = $( '#myModal' );

  $modal.find('.modal-title').text( infoModalData[key].title );

  $modal.find('.modal-body').text( infoModalData[key].title );

  $modal.modal('show');

  infoModalData[key]. 

});

var infoModalData = {

    opt1: {

      title: 'Opt 1 Title',

      text: 'Opt 1 Text',

      show: true

    },

    opt2: {

      title: 'Opt 2 Title',

      text: 'Opt 2 Text',

      show: true

    },

    opt3: {

      title: 'Opt 3 Title',

      text: 'Opt 3 Text',

      show: true

    },

};

$('select').on('change', function() {

  let key = $(this).val();

  if(!(key in infoModalData) || !infoModalData[key].show) {

    // this value has no data

    return false;

  }

  let $modal = $( '#myModal' );

  $modal.find('.modal-title').text( infoModalData[key].title );

  $modal.find('.modal-body').text( infoModalData[key].title );

  $modal.modal('show');

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

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title">Modal title</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body">

        

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-primary">Save changes</button>

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

      </div>

    </div>

  </div>

</div>

<select class="form-control">

<option value="" disabled selected>please select an option</option>

  <option value="opt1">First opt</option>

  <option value="opt2">Second opt</option>

  <option value="opt3">Third opt</option>

  <option value>No Modal</option>

  <option value>No Modal either</option>

</select>

Answer 2

感谢您的帮助。我能够通过在我的逻辑中添加一些额外的条件来解决这个问题。由于在用户选择选项之前选择框的默认值为 ，因此我能够创建一些逻辑，例如：value=""

if (orientation.value === "flipped-co" && switchType.value === "" && potValue.value === "")

这做了我想要的。再次感谢！