我可以单独使用Javascript来切换循环吗?
问题描述:
我有这个简单的HTML和Javascript,它工作得很好。我的问题是,有没有办法用循环做到这一点?我可以单独使用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上查看。
答
使用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>
答
尝试这样:
for (var i=0; i<el.length; i++) {
if (rs[i].checked) {
el[i].style.display = "block";
} else {
el[i].style.display = "none";
}
}
+0
感谢的人,我没有学会如何使用循环从你的答案正确的,但遗憾在我的情况下,它不能正常工作 –
感谢的人,这是什么我在寻找 :) –