Javascript数组随机化元素到选定的元素

Question

我想做一个函数，当你点击其中一个骰子元素时，它将重新掷骰子，并且它的左边的每个元素都重新滚动。

目前我已经有了它，当你加载页面，骰子编号1-6，当你点击一个骰子，它重新卷。试图找出如何使所选元素更改左侧的所有元素都有点麻烦。

这是我的。

(function() { 
    var dieElements; 

    dieElements = Array.prototype.slice.call(document.querySelectorAll('#dice div')); 

    dieElements.forEach(function (dieElement, whichDie) { 

    dieElement.textContent = whichDie + 1; 

    dieElement.addEventListener('click', function() { 
     dieElement.textContent = Math.floor(Math.random() * 6) + 1; 
    }, false); 
    }); 
}()); 

继承人的HTML

<fieldset id="dice-area"> 
<legend>Dice</legend> 
<div class="box-of-dice" id="dice"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
</fieldset> 

Answer 1

您已经拥有了模具的指数点击并被困在一个封闭的所有骰子的阵列。您只需要使用它们（轻松）是这样的：

(function() { 
 
    var dieElements; 
 

 
    dieElements = Array.prototype.slice.call(document.querySelectorAll('#dice div')); 
 

 
    dieElements.forEach(function(dieElement, whichDie) { 
 
    dieElement.textContent = whichDie + 1; 
 

 
    dieElement.addEventListener('click', function() {     // when this die is clicked 
 
     for(var i = 0; i <= whichDie; i++)         // loop over all the elements in dieElements array from index 0 to index whichDie (included) 
 
     dieElements[i].textContent = Math.floor(Math.random() * 6) + 1; // change their textContent 
 
    }, false); 
 
    }); 
 
}());

#dice div { 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
    margin: 5px; 
 
    width: 30px; 
 
    height: 30px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
}

<div id="dice"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>