Question

我想让这段代码干掉。我知道我在这里重复自己，必须有一种方法可以压缩这段代码。代码正在工作，并做我想要的，但我正在努力学习如何更好地配置我的代码。你能帮忙吗？

<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();
}

Answer 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 );

Working JSFiddle

Answer 2

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

Answer 3

无需使用具有匹配数字后缀的唯一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中的数字。

Javascript帮我做这个，所以它干了

3 个答案: