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

【问题标题】：Select 2 random divs with the same class jQuery选择2个具有相同类jQuery的随机div
【发布时间】：2015-04-02 05:48:50
【问题描述】：

我的问题很简单，假设我有 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 之类的东西来实现这一点？

【问题讨论】：

哪里有'foo'？是按钮吗？
没关系，$('.foo').click(function(){}); 随便
试试这个：stackoverflow.com/a/11186765/2000051
已经阅读了那个anwser，我无法理解，但我会再试一次

标签： javascript jquery html css

【解决方案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'});
});

【讨论】：

很高兴为您提供帮助 :) 请accept 回答它将帮助其他人找到正确的解决方案。
@prog 有时 r1 和 r2 将相等，例如r1 = r2 = 1 那么div1 的background 将不会更改为2 div，我们如何解决这个问题？
遇到同样的问题，有解决办法吗？
@aria - 如果当时r1 =r2=1可以查看if (r1==10) { r2=r2-1 } else {r2=r2+1;}
@Prog 是的，现在可以使用，或者其他解决方案可以是while(r1==r2){ r2 = (Math.random()*10); }

【解决方案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');
        }
    });
});

【讨论】：

【解决方案3】：

试试这个

更新：

$(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');
    });
});

【讨论】：

已更新，现在检查，它是 'getElementsByClassName'

【解决方案4】：

这里是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");
    });
});

【讨论】：