Juiste if statement

Door Yoeri Achterbergen op 01-09-2015 19:09

2.438 views

Hallo,

Met html heb ik een lijst van de zelfde div's gemaakt.

Klein voorbeeld:


<div class="list" id="list_top">
<div class="item style="opacity:1;></div>
<div class="item></div>
<div class="item></div>
<div class="item></div>
</div>

Met jquery kan ik via een buttun naar het volgende item gaan:


$(document).ready(function(){
    var items = $('div.item').length;

    $("#volgende").click(function(){

    if($('.item').css('opacity') == 1){
    $('.item').fadeOut(600).next().fadeIn(600);

    }
    
});
});

Wat ik zou willen is dat als het laaste item opacity 1 heeft hij weer naar de eerste gaat.

Zelf had ik al een begin gemaakt
d.m.v. Een variable te maken en met .length de aantal divs te tellen

Maar wat is nu het juiste if statement? Zodat hij weet dat t de laatste is?

Gr. Yoeri

DavY -

01-09-2015 20:03 gewijzigd op 01-09-2015 20:06


$(document).ready(function(){
    $(".list div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".list div:visible").next().length != 0)
            $(".list div:visible").next().show().prev().hide();
        else {
            $(".list div:visible").hide();
            $(".list div:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".list div:visible").prev().length != 0)
            $(".list div:visible").prev().show().next().hide();
        else {
            $(".list div:visible").hide();
            $(".list div:last").show();
        }
        return false;
    });
});


<div class="list">
     <div class="item">Eerste</div>
     <div class="item">Tweede</div>
     <div class="item">Derde</div>
     <div class="item">Vierde</div>
     <div class="item">Vijfde</div>
     <div class="item">Zesde</div>
     <div class="item">Zevende</div>
 </div>
 <button id="prev">Vorige</button> - <button id="next">Volgende</button>

Demo: http://jsfiddle.net/DavYBlaat/nemk6vcL/

Thomas van den Heuvel

01-09-2015 20:12

De crux is dus: als next().length gelijk is aan 0 ben je bij het laatste element aanbeland.

Overigens kon je dit in < 2 minuten googlen ook vinden, maar DavY was zo vriendelijk om een voorbeeld in elkaar te zetten.

Yoeri Achterbergen

02-09-2015 00:36

Beste Davy,

Dank voor het mooie voorbeeld. Dat is inderdaad wat ik bedoel.
Nu heb ik van de show's en hide's een fade gemaakt en vervolgens stop aangegeven zodat ze niet door elkaar lopen.
Al je nu snel achter elkaar klikt dan blijft hij bij functie volgende hangen bij item 7 en functie vorige bij item 1.
Wat kan ik hier aan doen dat hij gewoon verder gaat, ook al klik je wat sneller o de buttons :)

Demo

Reageren

Inloggen om te reageren