javascript - 如何将选中的单选按钮的值添加到单独的元素

Question

如何在不覆盖现有类的情况下将选中的单选按钮的值添加到单独的 div 中？

我遇到了麻烦，因为我喜欢在页面加载时加载选中的单选按钮的值，并且我喜欢正确更新类。 我的函数覆盖现有类而不是添加第二个类。

document.addEventListener('DOMContentLoaded', function() {
   
   var radioButtons = document.getElementsByName('color');
   var paragraph = document.querySelector('.folder');
  
    for(var i=0;i< radioButtons.length;i++)
    {
        var elem = radioButtons[i];
        elem.addEventListener('change',function(e){		
            console.log(paragraph);
            if(paragraph.className)
                paragraph.className = this.value;
            else
                paragraph.classList.add(this.value);
        }
        ,false);
        
    }
});

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

    for(var i=0;i< radioButtons.length;i++)
    {
        var elem = radioButtons[i];
        elem.addEventListener('change',function(e){		
            console.log(paragraph);
            if(paragraph.className)
                paragraph.className = this.value;
            else
                paragraph.classList.add(this.value);
        }
        ,false);
        
    }
});

document.addEventListener('DOMContentLoaded', function() {
   
   var radioButtons = document.getElementsByName('bordercolor');
   var paragraph = document.querySelector('.folder');

    for(var i=0;i< radioButtons.length;i++)
    {
        var elem = radioButtons[i];
        elem.addEventListener('change',function(e){		
            console.log(paragraph);
            if(paragraph.className)
                paragraph.className = this.value;
            else
                paragraph.classList.add(this.value);
        }
        ,false);
        
    }
});

.folder {
    width:100px;
    height: 60px;
    border: 5px solid;
    background: #111;
    transition: all 0.3s;
}




.radio-toolbar {
    display:block;
	float: left;
    padding: 20px;
    width: 33%;
    box-sizing: border-box;
}


.radio-toolbar input[type="radio"] {
    display:none;
}

.radio-toolbar label {
    display:block;
	width: 100%;
	float: left;
    background-color:#ddd;
    padding:4px 11px;
    font-size:16px;
	margin-bottom: 5px;
	cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked + label {
    background-color:#bbb;
}

.black {
    background-color:#000;
}

.white {
    background-color:#fff;
}

.green {
    background-color:#00CC00;
}


.size100 {
    width: 100px;
}

.size200 {
    width: 200px;
}

.size300 {
    width: 300px;
}


.borderYellow {
    border-color: #FFFF33;
}


.borderBlue {
    border-color: #3333FF;
}


.borderOrange {
    border-color: #FF9933;
}

.size200 {
    width: 200px;
}

.size300 {
    width: 300px;
}

<div class="folder">
</div> 





<div class="radio-toolbar">
   
    <input type="radio" id="radio1" name="color" value="black" checked>
    <label for="radio1">black</label>

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

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

</div>


 <div class="radio-toolbar">
   
    <input type="radio" id="radio4" name="size" value="size100" checked>
    <label for="radio4">size 10</label>

    <input type="radio" id="radio5" name="size" value="size200">
    <label for="radio5">size 20</label>

    <input type="radio" id="radio6" name="size" value="size300">
    <label for="radio6">size 30</label> 

</div>


 <div class="radio-toolbar">
   
    <input type="radio" id="radio7" name="bordercolor" value="borderYellow" checked>
    <label for="radio7">border yellow</label>

    <input type="radio" id="radio8" name="bordercolor" value="borderBlue">
    <label for="radio8">border blue</label>

    <input type="radio" id="radio9" name="bordercolor" value="borderOrange">
    <label for="radio9">border orange</label> 
   
</div>

Answer 1

您可以稍微清理一下代码以消除代码重复。然后您需要检查段落元素上的现有类，以便从同一组中删除类。

我想到了这个:

document.addEventListener('DOMContentLoaded', function () {

    var radios = {
        color: [].slice.call(document.getElementsByName('color')),
        bordercolor: [].slice.call(document.getElementsByName('bordercolor')),
        size: [].slice.call(document.getElementsByName('size'))
    };
    var radioButtons = [].concat.call([], radios.color, radios.size, radios.bordercolor);
    var paragraph = document.querySelector('.folder');

    for (var i = 0; i < radioButtons.length; i++) {
        var elem = radioButtons[i];
        elem.addEventListener('change', function (e) {
            unsetGroup(this.name);
            paragraph.classList.add(this.value);
        }, false);
    }

    function unsetGroup(name) {
        radios[name].forEach(function(el) {
            paragraph.classList.remove(el.value);
        });
    }
});

演示: http://jsfiddle.net/c8f330ut/