Javascript 帮我做这个，让它变干

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

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 安全的
消除randomNum

Answer 2

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 3

无需求助于具有匹配数字后缀的唯一 ID，这可以通过在零件上附加类来完成。它也可以在没有类的情况下使用相对元素来完成，但是类在我的示例中使它更清楚。

我将使用与您相同的 CSS 和基本相同的结构，但使用类代替所使用的 ID。

页面结构如我之前的评论所述：

"a div of class 'num_wrapper' which encloses exactly one div of class 'num_content' and a sibling button of class 'num_pick'"

这会获取所有 _num_pick_ 按钮，然后遍历它们并为每个按钮附加一个 click 事件处理程序。

处理函数对被点击的按钮使用 this，获取父按钮，然后在 (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.

中输入 change/update 个数字

Javascript 帮我做这个，让它变干

Javascript Help me make this so it's DRY

javascript

loops

dry

onclick

getelementbyid