我想让这段代码干掉。我知道我在这里重复自己,必须有一种方法可以压缩这段代码。代码正在工作,并做我想要的,但我正在努力学习如何更好地配置我的代码。你能帮忙吗?
http://codepen.io/anon/pen/GpMKLX
<div class="wrapper">
<div class="num_wrapper">
<div id="divNum_1"></div>
<button id="btn_1"> Pick</button>
</div>
<div class="num_wrapper">
<div id="divNum_2"></div>
<button id="btn_2"> Pick</button>
</div>
<div class="num_wrapper">
<div id="divNum_3"></div>
<button id="btn_3"> Pick</button>
</div>
<div class="num_wrapper">
<div id="divNum_4"></div>
<button id="btn_4"> Pick</button>
</div>
</div>
var btnOne = document.getElementById("btn_1");
var btnTwo = document.getElementById("btn_2");
var btnThree = document.getElementById("btn_3");
var btnFour = document.getElementById("btn_4");
var divOne = document.getElementById("divNum_1");
var divTwo = document.getElementById("divNum_2");
var divThree = document.getElementById("divNum_3");
var divFour = document.getElementById("divNum_4");
function randomNum() {
var num = Math.random() * 10;
num = Math.floor(num);
return num;
}
btnOne.onclick = function () {
divOne.innerHTML = randomNum();
}
btnTwo.onclick = function () {
divTwo.innerHTML = randomNum();
}
btnThree.onclick = function () {
divThree.innerHTML = randomNum();
}
btnFour.onclick = function () {
divFour.innerHTML = randomNum();
}
答案 0 :(得分:1)
function addOnclick(index)
{
//Get the button
var button = document.getElementById( "btn_" + index );
//Add listener
button.addEventListener(
"click",
function () {
document.getElementById( "divNum_" + index ).innerHTML = randomNum();
}
);
}
//Now call it
for ( var i = 1; i < 5; i++ ) addOnclick( i );
答案 1 :(得分:0)
var buttons = document.querySelectorAll("div button");
var divs = document.querySelectorAll("div.num_wrapper > div");
if( buttons.length != divs.length ) throw "different number of buttons vs divs";
for(var i=0; i<buttons.length;i++) {
buttons[i].onclick = function() {
divs[i].textContent = Math.floor( Math.random() * 10 );
}
}
getElementbyId
替换为querySelectorAll
textContent
代替半标准innerHTML
,它也是XSS-safe randomNum
答案 2 :(得分:0)
无需使用具有匹配数字后缀的唯一ID,这可以通过附加到部件的类来完成。使用相对元素也可以在没有类的情况下完成,但是在我的示例中,类使它更清晰。
我将使用与您相同的CSS和基本相同的结构,但使用类代替正在使用的ID。
页面结构如我之前的评论所述:
“一个类'num_wrapper'的div,它只包含一个类'num_content'的div和一个'num_pick'类的兄弟按钮”
这将获取所有_num_pick_按钮,然后遍历它们并为每个按钮附加单击事件处理程序。
处理函数使用this
作为单击的按钮,获取父级,然后查找num_content
div( querySelector )可以在任何节点上使用,而不是只需 document.querySelector!)并设置其textContent。
var buttons = document.querySelectorAll("button.num_pick");
for (var i=0; i<buttons.length; i++) {
buttons[i].addEventListener("click", function(e) {
var cont = this.parentElement.querySelector("div.num_content")
cont.textContent = Math.floor( Math.random() * 10 );
});
}
.wrapper {
width:448px;
margin:0 auto;
}
.num_wrapper {
margin:0 5px;
width:100px;
height:100px;
float:left;
border:1px solid #333;
background-color:#ccc;
position:relative;
font-family:Arial;
font-size:60px;
text-align:center;
}
button {
width:100%;
position:absolute;
top:72px;
left:0;
font-size:20px;
text-align:center;
}
<div class="wrapper">
<div class="num_wrapper">
<div class="num_content"></div>
<button class="num_pick"> Pick </button>
</div>
<div class="num_wrapper">
<div class="num_content"></div>
<button class="num_pick"> Pick </button>
</div>
<div class="num_wrapper">
<div class="num_content"></div>
<button class="num_pick"> Pick </button>
</div>
<div class="num_wrapper">
<div class="num_content"></div>
<button class="num_pick"> Pick </button>
</div>
</div>
这适用于任意数量的重复num_wrapper
div,无需更改/更新每个id
中的数字。