show hide Önceki Sonraki düğmesini kullanarak jQuery'yi kullanarak div'leri gizle?

Question

örneğin 10 <div>'a sahip olmak için, her bir numaralı düğmeyi bir sonraki tuşa bastığınızda tıklayın & önceki butona tıklayın <div>. jQuery'yi nasıl kullanırsınız?

Answer 1

<div class="divs"> 
    <div class="cls1">1</div> 
    <div class="cls2">2</div> 
    <div class="cls3">3</div> 
    <div class="cls4">4</div> 
    <div class="cls5">5</div> 
    <div class="cls6">6</div> 
    <div class="cls7">7</div> 
</div> 
<a id="next">next</a> 
<a id="prev">prev</a> 

Bu çok basit bir HTML örnektir. Bu gibi basit bir jQuery kod ile

:

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

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

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

daha fazla açıklama için: ilk blok ilk bir (e jQuery'nin her işlevi bir sayaçtır) dışında her div gizler.

Diğer iki blok, düğmelerin tıklanmasını sağlar. Görünen div ve sonraki tıklama için tıklayın (jquery'nin önceki() işlevine veya önceki div (jquery öğesinin önceki() işlevine bakın.

Sonraki div yoksa (sonraki düğmede)) biz görünür div gizleme ve birincisini gösterdiğinizi burada

Çevrimiçi örnek:. http://jsfiddle.net/hsJbu/

Answer 2

Size İşte

bazı örnekler istediğini bir atlıkarınca gibi geliyor: http://www.tripwiremagazine.com/2012/12/jquery-carousel.html

Bir div kaydırıp eskisi kayarak bir sonraki ve önceki düğme (veya başka bir etkisi olabilir

) Karuseller, görüntülere bağlı değiller ve içerikle dolu Div'ler olabilirler.

İyi şanslar & güzel bir gün

düzenleme var: özyüklenirler kendi atlıkarınca: u kendi bunu yapmak istiyorum http://twitter.github.io/bootstrap/javascript.html#carousel

Answer 3

aşağıda bir şey deneyin. Görüntülenecek tüm div'leri ayarlayın: başlangıçta öncelikle hariç. Ayrıca aşağıdaki kodun sahip olduğu div sayısına göre maxdiv değerini değiştiriniz (ya da numara değişebiliyorsa jQuery'de bulabilirsiniz).

$(document).ready(function(){ 
var tracker = 1; 
var maxdivs = 4; 

$("#next").click(function(){ 
var divclass = ".cls" + tracker; 
$(divclass).css("display","none"); 
tracker = tracker + 1; 
if(tracker > maxdivs) 
    tracker = 1; 
divclass = ".cls" + tracker; 
$(divclass).css("display","block"); 
}); 

$("#prev").click(function(){ 
var divclass = ".cls" + tracker; 
    $(divclass).css("display","none"); 
    tracker = tracker - 1; 
    if(tracker < 1) 
    tracker = maxdivs; 
    divclass = ".cls" + tracker; 
    $(divclass).css("display","block"); 
}); 
}); 

Answer 4

böyle yapabilirsiniz:

HTML:

<div class="mydivs"> 
    <div>div 1</div> 
    <div>div 2</div> 
    <div>div 3</div> 
    <div>div 4</div> 
</div> 
<button name="prev">go to previous div</button> 
<button name="next">go to next div</button> 

JS:

$(document).ready(function() { 
    var divs = $('.mydivs>div'); 
    var now = 0; // currently shown div 
    divs.hide().first().show(); // hide all divs except first 
    $("button[name=next]").click(function() { 
     divs.eq(now).hide(); 
     now = (now + 1 < divs.length) ? now + 1 : 0; 
     divs.eq(now).show(); // show next 
    }); 
    $("button[name=prev]").click(function() { 
     divs.eq(now).hide(); 
     now = (now > 0) ? now - 1 : divs.length - 1; 
     divs.eq(now).show(); // show previous 
    }); 
}); 

jsfiddle