兩個函數和兩個div上的唯一數組值

我想爲'CardContainer'和'Two'div中的每個div獲取不同的高度值。我想在每次點擊事件時隨機化這些值而不重複數組中的任何值。兩個函數和兩個div上的唯一數組值

HTML

<html> 
    <button id="press" type="Button" value="Shake">Test</button> 
    <div id="cardContainer"></div> 
    <div id="two"></div> 
    <div id="three"></div> 
</html>

CSS

#cardContainer div {border:solid 1px black; width: 20px;} 
#two {border:solid 1px black; width: 20px; position: absolute; top: 20px; left: 50px;} 
button {display: block;}

var balls90 = ['1px', '5px', '10px', '20px', '40px', '80px', '160px', '320px']; 
var cardContainer= document.getElementById("cardContainer"); 
var two= document.getElementById("two"); 
var $all = $("#cardContainer").push(balls90); 
var $next = $("#two").push(balls90); 

function getNumbers() { 
var player1 = new Array(); 
balls90.sort(function() { 
    return [Math.floor(Math.random() * balls90.length)]; 
}); 

$("#press").click(function() { 
$("#cardContainer").empty(); 
}); 

document.getElementById("press").addEventListener('click',getNumbers,true); 
for (var i = 1; i <= 4; i++) { 
    var div = document.createElement("div"); 
    div.style.height = (balls90[i]); 
    cardContainer.appendChild(div);  
} 
} 

getNumbers(); 

function getMore() { 
var player1 = new Array(); 
balls90.sort(function() { 
    return [Math.floor(Math.random() * balls90.length)]; 
});  

$("#press").click(function() { 
$("#two").empty(); 
}); 

document.getElementById("press").addEventListener('click',getMore,true); 
for (var i = 1; i <= 4; i++) { 
    var div = document.createElement("div"); 
    div.style.height = (balls90[i]); 
    div.style.border = "thin solid black"; 
    two.appendChild(div);  
} 
} 

getMore();

來源

2017-02-23 jlhanna

你能告訴我們你遇到了什麼問題嗎？ – aw04

如果我點擊按鈕，我會在'cardContainer'和'Two'div中獲得相似的值。我希望這兩個div只用唯一值從同一個數組中拉出來。 – jlhanna

你的代碼很混亂。 'getNumbers'和'getMore'看起來基本上是一樣的。 –

會這樣嗎？

var balls90 = ['1px', '5px', '10px', '20px', '40px', '80px', '160px', '320px']; 
var randomBalls90 = []; 
var $cardContainer = $("#cardContainer"); 
var $two = $("#two"); 

$("#press").click(function() { 
    $("#cardContainer, #two").empty(); 
    getNumbers(); 
}); 

function makedivs (el) { 
    for (var i = 1; i <= 4; i++) { 
    var $div = $("<div>"); 

    $div.css({ 
     height: randomBalls90[0], 
     border: "1px solid red" 
    }); 

    $(el).append($div); 
    randomBalls90.splice(0, 1); 
    } 
} 

function getNumbers() { 
    balls90.sort(function() { 
    return [Math.floor(Math.random() * balls90.length)]; 
    }); 

    randomBalls90 = JSON.parse(JSON.stringify(balls90)); 

    makedivs($cardContainer); 
    makedivs($two); 
} 

getNumbers();

基本上，我製作了隨機div作爲一個單獨的函數，接受一個元素來追加。

當getNumbers運行時，它克隆球90然後陣列JSON.parse(JSON.stringify())循環遍歷數組，並在每個循環中移除數組的第一個對象，所以它不會重複。

來源

2017-02-23 23:20:54

兩個函數和兩個div上的唯一數組值

回答

相關問題