Question

我正在使用这部分代码

   <div class="single-select">
        <div class="single-title">
            <p class="title">User answear</p> <img src="../resources/chevron-down.svg" alt="">
        </div>
        <ul id="single-select-dropdown">
            <li class="option" id="option1">answear 1 <img src="../resources/checkmark.svg" alt=""></li>
            <li class="option" id="option2">answear 2 <img src="../resources/checkmark.svg" alt=""></li>
            <li class="option" id="option3">answear 3 <img src="../resources/checkmark.svg" alt=""></li>
        </ul>
    </div>

const dropdownOptions = document.querySelectorAll('.single-select .option');

dropdownOptions.forEach(option => option.addEventListener('click', handleOptionSelected));

function handleOptionSelected(e) {
    const newValue = e.target.textContent + ' ';
    const titleElem = document.querySelector('.single-title .title');
    titleElem.textContent = newValue;
    e.target.classList.add('active')
}

每次选择选项JS时，都应将其添加到类列表“活动”中。关键是，只有单个选项可以在其上包含此类。当我选择其他选项时，有人可以帮助我如何每次将其删除吗？

Answer 1

使用匿名函数包装回调：

//...
option.addEventListener('click', function(e) {
  handleOptionSelected(e);
});
//...

然后在回调之前添加以下内容：
```
//...
//option.addEventListener('click', function(e) {
    dropdownOptions.forEach(option => option.classList.remove('active'));
//  handleOptionSelected(e);
//});
//...
```
现在，每当用户单击一个选项时，所有选项将删除类.active，然后回调handleOptionSelected()将.active添加到所单击的选项。

演示

注意：添加了一个CSS伪元素以演示一次仅存在一个.option.active。

const dropdownOptions = document.querySelectorAll('.single-select .option');

dropdownOptions.forEach(option => {
  option.addEventListener('click', function(e) {
    dropdownOptions.forEach(option => option.classList.remove('active'));
    handleOptionSelected(e);
  });
});

function handleOptionSelected(e) {
  const newValue = e.target.textContent + ' ';
  const titleElem = document.querySelector('.single-title .title');
  titleElem.textContent = newValue;
  e.target.classList.add('active');
}

.option::after {
  content: ' 'attr(class)
}

<div class="single-select">
  <div class="single-title">
    <p class="title">User answear</p> <img src="../resources/chevron-down.svg" alt="">
  </div>
  <ul id="single-select-dropdown">
    <li class="option" id="option1">answear 1 <img src="../resources/checkmark.svg" alt=""></li>
    <li class="option" id="option2">answear 2 <img src="../resources/checkmark.svg" alt=""></li>
    <li class="option" id="option3">answear 3 <img src="../resources/checkmark.svg" alt=""></li>
  </ul>
</div>

Answer 2

将此添加到您的代码中

async createUserListAndNavigate() {
    let genderTolook = 'female';

    let data = firebase
      .database()
      .ref('users/')
      .orderByChild('gender')
      .equalTo(genderTolook);
    data.once('value', snapshot => {
      console.log(JSON.stringify(snapshot.val()));
    });
  }

Answer 3

您必须迭代并删除active类

const dropdownOptions = document.querySelectorAll('.single-select .option');

dropdownOptions.forEach(option => option.addEventListener('click', handleOptionSelected));

function removeActive() {
  [...dropdownOptions].some(function(option) {
    // we are using .some assuming you have only 1 active class at any given time. If you think you will have multiple active classes, you can use .forEach instead of .some
    const hasClass = option.classList.contains('active');
    if (hasClass) {
      option.classList.remove('active');
    }

    return hasClass;
  })
}

function handleOptionSelected(e) {
  const newValue = e.target.textContent + ' ';
  const titleElem = document.querySelector('.single-title .title');
  titleElem.textContent = newValue;
  removeActive();
  e.target.classList.add('active')
}

.active {
  color: green;
}

<div class="single-select">
  <div class="single-title">
    <p class="title">User answear</p> <img src="../resources/chevron-down.svg" alt="">
  </div>
  <ul id="single-select-dropdown">
    <li class="option" id="option1">answear 1 <img src="../resources/checkmark.svg" alt=""></li>
    <li class="option" id="option2">answear 2 <img src="../resources/checkmark.svg" alt=""></li>
    <li class="option" id="option3">answear 3 <img src="../resources/checkmark.svg" alt=""></li>
  </ul>
</div>

Vanilla JS从先前的选择中删除类

3 个答案:

演示