Выберите 2 случайных дивы с тем же классом JQuery

Question

мой вопрос прост, предположим, что у меня есть 10 дивы:

<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 из дивы изменить свой фон на красный , Как я могу достичь этого с помощью чего-то вроде Math.random от js?

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

Try This

UPDATE:

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

Answer 3

Обобщенный подход к указанному количеству элементов для изменения.
просто измените 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 4

Вот упрощенная версия https://stackoverflow.com/a/11186765/2000051

Demo: 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"); 
    }); 
});