javascript - 无法从 HTML 元素中删除添加类

Question

我有三个彩色按钮。当我选择一个按钮时，我希望它被选中，而另外两个被取消选择。红色、蓝色和黄色是属性 isSelected 设置为 true 或 false 的对象。我可以选择一个按钮一次，将该按钮的 isSelected 设置为 true。但是，我似乎无法选择新按钮并取消选择当前按钮。

(我知道我可以使用 jQuery 轻松做到这一点......但我正在努力学习如何在这里使用 Javascript 对象......)

下面的代码没有运行，这是我认为与没有 HTML 和 CSS 的问题相关的部分。该应用程序在 CodePen 上:http://codepen.io/isachenx/pen/LxEOOR

我的想法是将每个选择器的 isSelected 设置为 true 或 false。如果 isSelected 为真，我将类 .selected 添加到 html 字符串，如果为假，则该字符串不包含该类。然后，每次单击 li 元素时，我都会重新呈现(至少我认为我正在做的事情)字符串...

    //create constructor
    function Selector(colour){
      this.colour = colour
      this.isSelected = false
    }

    //set method to select and deselect the list items
    Selector.prototype.selectColour = function(){
      this.isSelected = true
    }

    Selector.prototype.deselectColour = function(){
      this.isSelected = false
    }

    //render the string for the list item to HTML 
    Selector.prototype.toHTML = function(){
      let htmlString = ""
      htmlString += '<li id="' + this.colour + '" class="' + this.colour
      if (this.isSelected){
        htmlString += ' selected'
      }
      htmlString += '"></li>'
      return htmlString
    }
    
    //Constructor to render every list item to html
    function Controls(){
      this.selectors = []
    }

    Controls.prototype.add = function(selector){
      this.selectors.push(selector)
    }

    Controls.prototype.renderInElement = function(list){
      list.innerHTML = ''
      for (let i=0; i<this.selectors.length; i++){
        list.innerHTML += this.selectors[i].toHTML()
      }
    }

    let controls = new Controls

    let red = new Selector('red')
    let blue = new Selector('blue')
    let yellow = new Selector('yellow')

    controls.add(red)
    controls.add(blue)
    controls.add(yellow)

    let controlElement = document.getElementById('controlButtons')
    controls.renderInElement(controlElement)

    let redButton = document.getElementById('red')
    redButton.onclick = function(){
      red.selectColour()
      blue.deselectColour()
      yellow.deselectColour()
      controls.renderInElement(controlElement)
    }

    let blueButton = document.getElementById('blue')
    blueButton.onclick = function(){
      blue.selectColour()
      red.deselectColour()
      yellow.deselectColour()
      controls.renderInElement(controlElement)
    }

    let yellowButton = document.getElementById('yellow')
    yellowButton.onclick = function(){
      yellow.selectColour()
      red.deselectColour()
      blue.deselectColour()
      controls.renderInElement(controlElement)
    }

Answer 1

根据您的代码，第二次单击任一按钮都不起作用。原因是onclick只是第一次设置。

您的 toHTML 函数清除现有按钮(第 33 行:list.innerHTML = '')，结果清除它们的 onclick 事件.您必须在 toHTML 中再次设置它们。

像这样:

Selector.prototype.toHTML = function(){

  // set the on click function to the desired color
  let onclickStr = 'setOnClick(\'' + this.colour + '\')';

  let htmlString = ""
  htmlString += '<li id="' + this.colour + '" class="' + this.colour
  if (this.isSelected){
    htmlString += ' selected'
  }

  // Note the following change
  htmlString += '" onclick="' + onclickStr + '"></li>'
  return htmlString
}

然后，用以下内容包装您的 xxxbutton.onclick 函数:

function setOnClick(color) {
  let redButton = document.getElementById('red')
  let blueButton = document.getElementById('blue')
  let yellowButton = document.getElementById('yellow')
  if(color==='red'){    
    red.selectColour()
    blue.deselectColour()
    yellow.deselectColour()
  }else if(color==='blue'){
    blue.selectColour()
    red.deselectColour()
    yellow.deselectColour()
  }else{
    yellow.selectColour()
    red.deselectColour()
    blue.deselectColour()
  }
  controls.renderInElement(controlElement)
}

JSFIDDLE DEMO