我可以单独使用Javascript来切换循环吗？

Question

我有这个简单的HTML和Javascript，它工作得很好。我的问题是，有没有办法用循环做到这一点？

我不想使用jQuery - 只需简单的Javascript，请！

<form action=""> 
    <input type="radio" name="r" onclick="func();" id="r1"> 
    <input type="radio" name="r" onclick="func();" id="r2"> 
    <input type="radio" name="r" onclick="func();" id="r3"> 
    <input type="radio" name="r" onclick="func();" id="r4"> 
</form> 

<div id="sq" style=" width: 100px; 
    height: 100px; 
    background: #000; 
    display: none;"></div> 
<div id="ci" style=" width: 100px; 
    height: 100px; 
    background: #555; 
    display: none;></div> 
<div id="tr" style=" width: 100px; 
    height: 100px; 
    background: #888; 
    display: none;></div> 

<script> 
var r1 = document.getElementById("r1"); 
var r2 = document.getElementById("r2"); 
var r3 = document.getElementById("r3"); 

var sq = document.getElementById("sq"); 
var ci = document.getElementById("ci"); 
var tr = document.getElementById("tr"); 

var el = [sq, ci, tr]; 
var rs = [r1, r2, r3]; 



function func() { 
    if(r1.checked) { 
     sq.style.display = "block"; 
    } else { 
     sq.style.display = "none"; 
    } 
    if(r2.checked) { 
     ci.style.display = "block"; 
    } else { 
     ci.style.display = "none"; 
    } 
    if(r3.checked) { 
     tr.style.display = "block"; 
    } else { 
     tr.style.display = "none"; 
    } 


} 
</script> 

您可以在codepen here上查看。

Answer 1

使用addEventListener，而不是内联事件侦听器。我重构你的代码位：

const colors = ['black', '#777', '#BBB', 'white']; 
 
const area = document.querySelector('div'); // find the <div> element 
 
// find all <input type="radio"> elements 
 
document.querySelectorAll('input[type="radio"]').forEach((input, index) => { 
 
    // add an event listener to the click event 
 
    input.addEventListener('click',() => { 
 
    // set the <div>'s background color 
 
    area.style.backgroundColor = colors[index]; 
 
    }); 
 
});

div { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<input type="radio" name="r"> 
 
<input type="radio" name="r"> 
 
<input type="radio" name="r"> 
 
<input type="radio" name="r"> 
 

 
<div></div>

Answer 2

尝试这样：

for (var i=0; i<el.length; i++) { 
    if (rs[i].checked) { 
    el[i].style.display = "block"; 
    } else { 
    el[i].style.display = "none"; 
    } 
}