javascript - 达到特定值后如何停止 JavaScript 事件

Question

我有一个简单的动态计算模板。如您所见，模板以a + b开头。当用户单击添加按钮时，将根据模板的最后一个元素显示两种类型的下拉列表。如果计算以值结束，将显示操作下拉菜单，反之亦然。这里的问题是，当模板作为一个完整的数学练习完成时，下拉菜单应该停止显示。像a + b + c，a + b + c + d和这里的下拉菜单应该在每次最后一个元素是值时消失，而不是操作。

    document.querySelector('.container').addEventListener('click', e => {
      const countItem = document.querySelector('.lists').childElementCount
      if (countItem % 2 == 0) {
        dropdown('dropdown-value')

      } else {
        dropdown('dropdown-operation')
      }
    });

    document.querySelectorAll('.menu-list').forEach(list => list.addEventListener('click', e => {
      const span = document.createElement('span');
      span.textContent = e.target.textContent

      document.querySelector('.lists').appendChild(span)
      document.querySelector('.dropdown-value').style.display = 'none'
      document.querySelector('.dropdown-operation').style.display = 'none'
    }));

    dropdown = (element) => {
      document.querySelector(`.${element}`).style.display = 'block'
    }

  .container {
    display: flex;
    font-size: 20px;
    margin-top: 2rem;
    margin-left: 2rem;
  }

  a {
    margin-left: 1rem;
  }

  ul {
    margin: 0;
    padding: 0;
  }

  .lists span {
    padding: 1rem;
    background: #f1f1f1;
    margin-right: .2rem;
  }

  .add {
    position: relative;
    background: #290fff;
    color: #fff;
    padding: 5px;
    cursor: pointer;
  }

  .dropdown-operation,
  .dropdown-value {
    width: 100%;
    position: absolute;
    left: 0;
    background: #f1f1f1;
  }

  .dropdown-value li,
  .dropdown-operation li {
    display: block;
    color: #000;
    cursor: pointer;
    padding: 5px;
    border-bottom: 1px solid #000;
    text-align: center;
  }

  <div class="container">
    <div class="lists">
      <span>a</span>
      <span>+</span>
      <span>b</span>
    </div>

    <a class="add"> Add

      <!-- Dropdowns -->
      <div class="dropdown-value" style="display: none;">
        <ul class="menu-list">
          <li>a</li>
          <li>b</li>
          <li>c</li>
          <li>d</li>
        </ul>
      </div>
      <div class="dropdown-operation" style="display: none;">
        <ul class="menu-list">
          <li>*</li>
          <li>/</li>
          <li>+</li>
          <li>-</li>
        </ul>
      </div>
    </a>
  </div>

标签： javascriptdomevents

Answer 1

这应该有效。

listen('.open');
listen('.dropdown-operation');

function listen(elem) {
  document.querySelector(elem).addEventListener('click', e => {
    const countItem = document.querySelector('.lists').childElementCount
    if (countItem % 2 == 0) {
      dropdown('dropdown-value')

    } else {
      dropdown('dropdown-operation')
    }
  });
}

document.querySelectorAll('.menu-list').forEach(list => list.addEventListener('click', e => {
  const span = document.createElement('span');
  span.textContent = e.target.textContent

  document.querySelector('.lists').appendChild(span)
  document.querySelector('.dropdown-value').style.display = 'none'
  document.querySelector('.dropdown-operation').style.display = 'none'
}));

const dropdown = (element) => {
  document.querySelector(`.${element}`).style.display = 'block'
}

.container {
  display: flex;
  font-size: 20px;
  margin-top: 2rem;
  margin-left: 2rem;
}

a {
  margin-left: 1rem;
}

ul {
  margin: 0;
  padding: 0;
}

.lists span {
  padding: 1rem;
  background: #f1f1f1;
  margin-right: .2rem;
}

.add {
  position: relative;
  background: #290fff;
  color: #fff;
  padding: 5px;
  cursor: pointer;
}

.dropdown-operation,
.dropdown-value {
  width: 100%;
  position: absolute;
  left: 0;
  background: #f1f1f1;
}

.dropdown-value li,
.dropdown-operation li {
  display: block;
  color: #000;
  cursor: pointer;
  padding: 5px;
  border-bottom: 1px solid #000;
  text-align: center;
}

<div class="container">
  <div class="lists">
    <span>a</span>
    <span>+</span>
    <span>b</span>
  </div>

  <a class="add">
    <div class='open'>add</div>

    <!-- Dropdowns -->
    <div class="dropdown-value" style="display: none;">
      <ul class="menu-list">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
      </ul>
    </div>
    <div class="dropdown-operation" style="display: none;">
      <ul class="menu-list">
        <li>*</li>
        <li>/</li>
        <li>+</li>
        <li>-</li>
      </ul>
    </div>
  </a>
</div>