Question

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

（我知道我可以轻松地使用jQuery做到这一点......但是我试图在这里学习如何使用Javascript对象......）

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

我的想法是为每个选择器设置isSelected为true或false。如果isSelected为true，我将类.selected添加到html字符串，如果它为false，则该字符串不包含该类。然后我每次点击li元素时重新渲染（至少我认为我正在做的事情）字符串......

＆＃13;

    //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)
    }

＆＃13;

Answer 1

将isSelected设置为true或false并不会更改DOM元素上的类。添加/删除类：

var colourObj = document.querySelector(colour);
colourObj.classList.add('selected');
//or to remove a class
colourObj.classList.remove('selected');

Answer 2

根据您的代码，再次点击任一按钮都不起作用。原因是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

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

2 个答案: