函数覆盖类而不是添加新的

Question

如何在不覆盖现有类的情况下向元素添加类？

我的函数捕获一个选中的单选按钮的值，并将其添加到元素中。

我遇到了麻烦，因为选中的单选按钮的值会覆盖现有的类而不是添加第二个。

http://codepen.io/anon/pen/zGJXQj

document.addEventListener('DOMContentLoaded', function() {
  var radioButtons = document.getElementsByName('size');

  for(var i = 0; i < radioButtons.length; i++) {
    radioButtons[i].addEventListener('change', update, false);
  }

 function update() {
  var paragraph = document.querySelector('.element');
    paragraph.className = 'element';
    for(var i = 0; i < radioButtons.length; i++) {
      if (radioButtons[i].checked) {
        paragraph.classList.add(radioButtons[i].value);
      }
    }
  }

  update();
});


document.addEventListener('DOMContentLoaded', function() {
  var radioButtons = document.getElementsByName('color');

  for(var i = 0; i < radioButtons.length; i++) {
    radioButtons[i].addEventListener('change', update, false);
  }

 function update() {
  var paragraph = document.querySelector('.element');
    paragraph.className = 'element';
    for(var i = 0; i < radioButtons.length; i++) {
      if (radioButtons[i].checked) {
        paragraph.classList.add(radioButtons[i].value);
      }
    }
  }

  update();
});

.element{
width: 300px;
height: 100px;
margin-bottom: 50px;
border: 1px solid #111;
}

.small{
width: 300px;
height: 100px;
}

.big{
width: 400px;
height: 200px;
}

.blue{
background: #0000FF;
}

.green{
background: #00FF00;
}

.black{
background: #000;
}

<div class="element">
	</div> 

  
  
   
    <input type="radio" id="radio1" name="size" value="small" checked>
    <label for="radio1">option1</label>
    
    <input type="radio" id="radio2" name="size" value="big">
    <label for="radio2">option2</label>
  
  

<input id="blue" type="radio" name="color"  value="blue" checked/> 
<label for="blue">blue</label>

<input id="green" type="radio" name="color"  value="green"/> 
<label for="green">green</label>

<input id="black" type="radio" name="color"  value="black"/> 
<label for="black">black</label>

    

Answer 1

问题在于您正在创建两个事件处理程序，每个处理程序对应一个无线电组。这会导致单击一个或另一个被单击一个单选按钮。其他按钮不参与！

解决方案：只创建一个事件处理程序。

document.addEventListener('DOMContentLoaded', function() {
  var radioButtons = Array.prototype.slice.call(document.getElementsByName('size')).concat(Array.prototype.slice.call(document.getElementsByName('color')));

  for (var i = 0; i < radioButtons.length; i++) {
    radioButtons[i].addEventListener('change', update, false);
  }

  function update() {
    var paragraph = document.querySelector('.element');
    paragraph.className = 'element';
    for (var i = 0; i < radioButtons.length; i++) {
      if (radioButtons[i].checked) {
        paragraph.classList.add(radioButtons[i].value);
      }
    }
  }

  update();
});

.element {
  width: 300px;
  height: 100px;
  margin-bottom: 50px;
  border: 1px solid #111;
}
.small {
  width: 300px;
  height: 100px;
}
.big {
  width: 400px;
  height: 200px;
}
.blue {
  background: #0000FF;
}
.green {
  background: #00FF00;
}
.black {
  background: #000;
}

<div class="element">
</div>


<input type="radio" id="radio1" name="size" value="small" checked>
<label for="radio1">option1</label>

<input type="radio" id="radio2" name="size" value="big">
<label for="radio2">option2</label>


<input id="blue" type="radio" name="color" value="blue" checked/>
<label for="blue">blue</label>

<input id="green" type="radio" name="color" value="green" />
<label for="green">green</label>

<input id="black" type="radio" name="color" value="black" />
<label for="black">black</label>

Answer 2

连接到当前的className

paragraph.className = paragraph.className + ' element';

document.addEventListener('DOMContentLoaded', function() {
  var radioButtons = document.getElementsByName('size');

  for (var i = 0; i < radioButtons.length; i++) {
    radioButtons[i].addEventListener('change', update, false);
  }

  function update() {
    var paragraph = document.querySelector('.element');
    paragraph.className = paragraph.className + ' element';
    for (var i = 0; i < radioButtons.length; i++) {
      if (radioButtons[i].checked) {
        paragraph.classList.add(radioButtons[i].value);
      }
    }
  }

  update();
});


document.addEventListener('DOMContentLoaded', function() {
  var radioButtons = document.getElementsByName('color');

  for (var i = 0; i < radioButtons.length; i++) {
    radioButtons[i].addEventListener('change', update, false);
  }

  function update() {
    var paragraph = document.querySelector('.element');
    paragraph.className = paragraph.className + ' element';
    for (var i = 0; i < radioButtons.length; i++) {
      if (radioButtons[i].checked) {
        paragraph.classList.add(radioButtons[i].value);
      }
    }
  }

  update();
});

.element {
  width: 300px;
  height: 100px;
  margin-bottom: 50px;
  border: 1px solid #111;
}
.small {
  width: 300px;
  height: 100px;
}
.big {
  width: 400px;
  height: 200px;
}
.blue {
  background: #0000FF;
}
.green {
  background: #00FF00;
}
.black {
  background: #000;
}

<div class="element">
</div>




<input type="radio" id="radio1" name="size" value="small" checked>
<label for="radio1">option1</label>

<input type="radio" id="radio2" name="size" value="big">
<label for="radio2">option2</label>



<input id="blue" type="radio" name="color" value="blue" checked/>
<label for="blue">blue</label>

<input id="green" type="radio" name="color" value="green" />
<label for="green">green</label>

<input id="black" type="radio" name="color" value="black" />
<label for="black">black</label>