时间戳

首页 > 解决方案 > 所有下拉菜单的文本内容同时变化，而不是单独更新

javascript - 所有下拉菜单的文本内容同时变化，而不是单独更新

问题描述

我的网站上有三个通过 Bootstrap 创建的下拉菜单。 在此处输入图像描述 理想情况下，当用户单击下拉菜单并选择内部菜单项之一时，下拉菜单应将其文本内容更新为所选菜单项的文本内容。

在此处输入图像描述

但是，对于任何下拉菜单，如果用户单击菜单项，则所有三个下拉菜单的文本内容都会更新，而不是仅更新单个下拉菜单，如下所示 在此处输入图像描述

我目前的方法是，aria-expanded每个下拉按钮的属性都会更改为true是否在按钮上打开了下拉菜单。如果aria-expanded特定下拉菜单的值为true，则该按钮的文本内容将更改为所选菜单项的文本内容。

JS

function addPlanesToDropDowns() {
  let dropdowns = document.querySelector('.dropdown-menu');
  let dropDownButtonOne = document.querySelector('#dropdownMenuButtonOne');
  let dropDownButtonTwo = document.querySelector("#dropdownMenuButtonTwo");
  let dropDownButtonThree = document.querySelector("#dropdownMenuButtonThree");
  dropDownDisabledCheck();

  for (let i = 0; i < state.airplaneData.length; i++) {
    let dropDownMenuItem = document.createElement('a');
    dropDownMenuItem.classList.add('dropdown-item');
    dropDownMenuItem.href = '#';
    dropDownMenuItem.textContent = state.airplaneData[i].make + " " + state.airplaneData[i].model;

    dropDownMenuItem.addEventListener('click', function (event) {
      event.preventDefault();

      if (dropDownButtonOne.getAttribute('aria-expanded')) {
        dropDownButtonOne.textContent = dropDownMenuItem.textContent;
        dropDownButtonOne.setAttribute('aria-expanded', false);
      }
      if (dropDownButtonTwo.getAttribute('aria-expanded')) {
        dropDownButtonTwo.textContent = dropDownMenuItem.textContent;
        dropDownButtonTwo.setAttribute('aria-expanded', false);
      }
      if (dropDownButtonThree.getAttribute('aria-expanded')) {
        dropDownButtonThree.textContent = dropDownMenuItem.textContent;
        dropDownButtonThree.setAttribute('aria-expanded', false);
      }
      dropDownDisabledCheck();
    });
    dropdowns.appendChild(dropDownMenuItem);
  }
}

HTML

       <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonOne" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Plane 1</button>
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonTwo" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Plane 2</button>
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonThree" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Plane 3</button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <!-- <a class="dropdown-item" href="#">Planes go here</a> -->
            </div>
        </div>

尽管如此，所有三个下拉菜单都会使用相同的选定菜单项文本内容进行更新，即使我只是在具有特定 ID 属性的按钮元素上设置文本内容。

标签： javascripthtmltwitter-bootstrapbootstrap-4drop-down-menu

解决方案

这段代码dropDownButtonOne.getAttribute('aria-expanded')返回一个字符串，而不是布尔值，所以要么"true"要么"false"。

因为它是一个非空字符串，所以它总是评估为 TRUE。你需要改变你的状况。

例如，您可以检查if(dropDownButtonOne.getAttribute('aria-expanded') === "true")。

推荐阅读