Question

我有一个简单的测验程序。如果用户单击答案，颜色将变为黄色。我想实现两件事：

第二次单击后删除颜色
如果用户选择其他选项，则切换颜色

我正在尝试将removeEventListener添加到我的changeBg（）函数中，但是它不起作用。

这是我的代码

 [Codepen](https://codepen.io/matoung/pen/wXNpLq)

Answer 1

首先，为了切换其他对象，您需要一种将它们分组的方法。

例如，您可以添加一个data属性，例如data-q="1"来表示这是问题1。

然后，您可以遍历所有问题一选项。

function changeBg() {
  // Check which question this is
  let question = this.dataset.q; 
  // Get all the other options from this question 
  let others = document.querySelectorAll('[data-q="' + question + '"]');

  // If the background color is already set
  if (this.style.backgroundColor) {
    // Clear it
    this.style.backgroundColor = null;
  } else {
    // Otherwise, clear all of the options
    for(var i = 0; i < others.length; i++)
      others[i].style.backgroundColor = null;
    // Then set the one that has been clicked to yellow
    this.style.backgroundColor = 'yellow'; 
  }
}

这是您的Codepen的一个分支，用于针对第一个问题

改变答案的颜色

1 个答案: