[jQuery] Meerdere random items uit een lijst tonen

[Rexomnium]

Ik ben bezig om een bestaande website om te bouwen tot iets dat meer inhoud heeft en beter aansluit bij onze doelgroep. In een bestaand CMS heb ik de vrijheid om een geheel nieuwe template te implementeren. Helaas geeft het CMS weinig flexibele mogelijkheden om met dynamische content om te gaan. Ik ben derhalve aangewezen op client-side oplossingen om de inhoud een dynamischere look & feel te geven.

Voor een item op de homepage wil ik graag een snel overzicht geven van een aantal artikelen die wij aanbieden. Ik heb te maken met een stuk of 25 items in een unsorted list. Hiervan wil ik er graag drie op een willekeurige manier tonen. Het is me reeds gelukt om er één in op een random manier te tonen, maar bij drie stuks loop ik vast.

Voor mijn doeleinden lijkt mij JQuery goed geschikt. Het is een heerlijk lightweight script dat veel mooie mogelijkheden biedt. Wellicht dat ik in een later stadium hieruit andere onderdelen wil gebruiken, maar voor nu wil ik alleen de willekeurmogelijkheden gebruiken.

Ik zou het heel fijn vinden als iemand mij een eind op weg kan helpen.

De lijst die ik wil gebruiken is als volgt in HTML:

HTML:

<div id="cardCategories">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>etc</li>
    </ul>
</div>

De JavaScript die ik aanroep in de HEAD (en die gebruik maakt van de JQuery library) is als volgt:

JavaScript:

this.randomtip = function(){
    var length = $("#cardCategories li").length;
    var ran = Math.floor(Math.random()*length) + 1;
    $("#cardCategories li:nth-child(" + ran + ")").show();
};

$(document).ready(function(){   
    randomtip();
});

Dit werkt perfect om 1 item te tonen. Ik kon het zelfs mooier maken door de list-item in te laten faden (in mijn goeiste Nederlands):

JavaScript:

this.randomtip = function(){

    var pause = 3000; // define the pause for each tip (in milliseconds) 
    var length = $("#cardCategories li").length; 
    var temp = -1;      

    this.getRan = function(){
        // get the random number
        var ran = Math.floor(Math.random()*length) + 1;
        return ran;
    };
    this.show = function(){
        var ran = getRan();
        // to avoid repeating
        while (ran == temp){
            ran = getRan();
        }; 
        temp = ran;
        $("#cardCategories li").hide(); 
        $("#cardCategories li:nth-child(" + ran + ")").fadeIn("fast");      
    };
    
    show(); setInterval(show,pause);
    
};

$(document).ready(function(){   
    randomtip();
});

De JQuery library die ik heb gebruikt, kun je hier vinden.

Ik heb ook voor andere oplossingen gezocht dan JQuery, maar tot dusver heeft me dat niet het gewenste resultaat opgeleverd. Wellicht dat ik op de verkeerde termen zoek (show several random items javascript, display random items, show random items). Ik hoop dat iemand mij een eind in de goede richting kan schoppen. Het liefste zou ik een oplossing zien met de laatste javascript opties (het fade-in effect), maar de eerste volstaat ook

[Juup]

1. Math.floor() +1 is hetzelfde als Math.ceil()
2. Je kunt je functie toch 2x (of vaker) aanroepen?
3. this.randomtip met daarin this.show functie kan verwarrend werken. Weet je precies wat die this daar is? Misschien is var show = function(){}; beter.

[ Voor 43% gewijzigd door Juup op 29-06-2010 23:16 ]

[Rexomnium]

Juup schreef op dinsdag 29 juni 2010 @ 23:14:
1. Math.floor() +1 is hetzelfde als Math.ceil()
2. Je kunt je functie toch 2x (of vaker) aanroepen?
3. this.randomtip met daarin this.show functie kan verwarrend werken. Weet je precies wat die this daar is? Misschien is var show = function(){}; beter.

Bedankt voor het antwoord. Het script is inderdaad wat slordig geschreven, maar het werkte voor mijn doeleinden. In ieder geval heb ik tip 1 en 3 doorgevoerd, wat qua werking weinig verschil heeft uitgemaakt, maar niettemin waarschijnlijk beter is.

Tip 2 is echter wat duisterder voor mij. Ik heb de functie show() meerdere keren aangeroepen, maar dat leidt tot niets (zie telkens maar 1 item). Ook randomtip() meerdere keren aanroepen werkte niet. Kun je iets preciezer zijn?

[Bosmonster]

Je kunt toch gewoon 3 willekeurige getallen tussen 0 en 24 pakken en die indices uit je artikelen nemen?