CODEWITHSUNDEEP
jqueryrandomonclick
Andrew Charlton
Andrew Charlton

Reputation: 251

Need to randomize an array with jquery and display a different item each time

I'm trying to randomize an array of div classes and then fade in different divs (facts) each time a button is clicked. However, what I can't work is how to display a completely different div each time, so that a div is not repeated on click.

My current code is: 

$(document).ready(function () {

    var facts = Array('.fact1', '.fact2');

    $(document).delegate('a.eggbutton', 'click', function () {

        $(fact).fadeOut('slow');

        var fact = facts[Math.floor(Math.random() * facts.length)];

        $(fact).fadeIn('slow');

    });

});

Upvotes: 0

Views: 305

Answers (4)

BeNdErR
BeNdErR

Reputation: 17927

hope this helps: http://jsfiddle.net/AMmwL/6/

code

function randomFact(){
    var factsArr = $(".fact");
    $(".fact").hide("slow");
    var rnd = Math.floor((Math.random()*(factsArr.length-1)));
    $(factsArr[rnd]).show("slow");
}

Upvotes: 3

Roland Mai
Roland Mai

Reputation: 31097

One way to guarantee that you will not generate the same value twice is to keep a log of the last generated value and generate another one if the same value is generated. Simply:

$(document).ready(function () {

    var facts = Array('.fact1', '.fact2');

    var currentValue = 0;

    $(document).delegate('a.eggbutton', 'click', function () {

        $(fact).fadeOut('slow');

        var newValue = 0;

        while(newValue == lastValue){
            newValue = Math.floor(Math.random() * facts.length);
        }
        currentValue = newValue; 

        var fact = facts[currentValue];

        $(fact).fadeIn('slow');
    });
});

This will guarantee that the same fact is not displayed twice and the uniform random generator will guarantee a mostly uniform distribution.

Upvotes: 1

Yannis
Yannis

Reputation: 6157

What about doing something like:

var arrayIndex = 0;

$(document).ready(function() {

    var facts = Array('.fact1','.fact2');

    $(document).delegate('a.eggbutton', 'click', function(){ 

    $(fact).fadeOut('slow');

    arrayIndex++;
    if (arrayIndex % facts.length == 0) shuffle(array);

    var fact = facts[arrayIndex % facts.length];

    $(fact).fadeIn('slow');

});

I assume you can find a suffle method for javascript but one can be found here:

How can I shuffle an array?

A problem with this approach is that you can still get the same "random" number after a shuffle but you can further randomize it by doing (pseudo-code follows):

while (randomNumberForIndexBeforeShuffle == randomNumberForIndexAfterShuffle) {
   arrayIndex++;
   re-calculate randomNumberForIndexAfterShuffle
}

Upvotes: 0

Onur Topal
Onur Topal

Reputation: 3061

I think your problem is when you show a div you are not hiding it when showing the other one. You did try doing it by $(fact).fadeOut('slow'); but as fact is local variable it won t work as you expected.

as a first soluyion you can define it in global scope like window.fact = ''

or also add class when showing to div and next time you are showing another div just hide it like below

$(".visibleDivClass").fadeOut('slow').removeClass("visibleDivClass");
...YOUR CODE...
$(fact).fadeIn('slow').addClass("visibleDivClass");

Upvotes: 2

Related Questions