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

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

//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");
  }

当选中某些选项时，我会在几个不同的选择框中显示模式。模式为空，我根据选项动态更改文本。问题在于我的方向选择框

 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();
    }

问题: 当用户从方向选择框中选择翻转的co时，模式显示。但是，事件侦听器列表中的下一项显示相同的翻转方向模式内容。我相信问题在于事件监听器在每个选择框中循环，因为翻转的co仍然是真的，所以它显示第一个模态内容，而不是下一个内容。如何防止这种情况发生

我试过：

方向代码下的event.stopPropagation，但也不起作用

我还尝试添加一个cookie，以防止模式在选择翻转的co后再次显示，但这当然会防止模式在我希望它显示的框中再次显示

---

不可能使用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：{ 标题：“选择1标题”， 文本：“选择1文本”， 秀：真的 }, 选项2：{ 标题：“选择2标题”， 文本：“选择2文本”， 秀：真的 }, opt3：{ 标题：“选择3标题”， 文本：“选择3文本”， 秀：真的 }, }; $'select'。在'change'上，函数{ 让key=$this.val； 如果！输入infoModalData | |！infoModalData[key]。显示{ //此值没有数据 返回false； } 设$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； }; 情态标题 &时代； 保存更改 关 请选择一个选项 第一选择 第二选择 第三选择 无模态 也没有模态

---

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

如果orientation.value===翻转的co&&switchType.value===&&potValue.value===

---

这正是我想要的。再次感谢

问题是，您正在同时收听所有事件。如果要显示特定案例的对话框，必须为每个案例注册事件。在这种情况下，对于您创建的每个select。如果您使用jquery，您可以注册自定义事件，以便指定必须打开特定对话框的事件：问题是“我的选择框”的某些值将禁用“选择框”下方的单选框。我使用此方法的目标是不为所有5个输入创建事件侦听器，但是一个查找更改事件的全局事件侦听器。因此，您可以为所有这些事件添加一个类或数据属性，然后为它们添加一个事件侦听器。我希望我可以-这是一个WooCommerce产品，我没有太多能力使用数据属性自定义选择。为什么停止广播不起作用？我认为在侦听事件并显示模式后，StopRopagation将停止侦听该选择框上的更改事件？在这种情况下，您只需将数据属性值移动到对象/数组即可。对象的键是当前选定的值，如果它不存在，则不显示模式，如果存在，则填充数据并显示ite。StopperPagation阻止事件在DOM中冒泡。如果您使用的是，您不能在不触发对div的单击的情况下单击select。StopRopagation阻止了这一点。我已经编辑了我的答案，所以模态只显示一次。