Question

我的问题很简单，假设我有10个div：

<div class="someDiv"></div>
<div class="someDiv"></div>
<div class="someDiv"></div>
<div class="someDiv"></div>
<div class="someDiv"></div>
<div class="someDiv"></div>
<div class="someDiv"></div>
<div class="someDiv"></div>
<div class="someDiv"></div>
<div class="someDiv"></div>

我希望当我点击'foo'时，只有2个div会将背景变为红色。我怎样才能通过js中的Math.random实现这个目标？

Answer 1

试试这个 - 使用Math.Random和parseInt

<强> Working Demo Here

$(document).ready(function(){
    var r1 = (Math.random()*10);
    var r2 = (Math.random()*10); 
    if(parseInt(r1)==parseInt(r2)) // IF BOTH ARE SAME
    {
       if(parseInt(r1)==10)
       {
           r2=r2-1;
       }
       else
       {
          r2=r2+1;
       }
    }   
    var allDiv = $('.someDiv');    
    $(allDiv[parseInt(r1)]).css({'background':'red'});
    $(allDiv[parseInt(r2)]).css({'background':'red'});
});

Answer 2

要更改指定数量的元素的通用方法只需更改var numOfDivToChange=2;即可将效果应用于更多元素。

$(document).ready(function(){
    var numOfDivToChange=2;
    $('.foo').click(function(){


        //get all similar elements array
        var allFoos = document.getElementsByClassName('someDiv');

        //sanity check
        if(numOfDivToChange>allFoos)
             return false;

        for(var i=0;i<numOfDivToChange;i++)
        { 
           //generate a random index
           var   randIndex = Math.floor((Math.random() * allFoos.length) + 1);

           //set the css changes you want
           allFoos[randIndex].css('background','red');
        }
    });
});

Answer 3

以下是https://stackoverflow.com/a/11186765/2000051

的简化版本

演示：http://jsfiddle.net/lotusgodkk/fK8Xw/69/

JS：

function shuffle(array) {
    var m = array.length,
        t, i;
    while (m) {
        i = Math.floor(Math.random() * m--);
        t = array[m];
        array[m] = array[i];
        array[i] = t;
    }
    return array;
}

$(function () {
    $("button").click(function () {
        var $all = $(".someDiv").removeClass("red");
        $(shuffle($all).slice(0, 3)).addClass("red");
    });
});

Answer 4

试试这个

更新：

$(document).ready(function(){
    $('.foo').click(function(){
        var rand1 = Math.floor((Math.random() * 10) + 1);
        var rand2 = Math.floor((Math.random() * 10) + 1);
        var a = document.getElementsByClassName('someDiv')[rand1];
        var b = document.getElementsByClassName('someDiv')[rand2];
        a.css('background','red');
        b.css('background','red');
    });
});

选择2个具有相同类jQuery的随机div

4 个答案: