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

尝试这样的事情：

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

Answer 2

使用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>

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

2 个答案: