两个函数和两个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上的唯一数组值

回答

相关问题