Trouver la prochaine division cachée et la montrer avec un sélecteur jQuery

Question

Je construis un diaporama dans jQuery qui permet à l'utilisateur de voir quatre images, et de les feuilleter, en avant et en arrière en ajoutant une nouvelle div avec l'image à la bas via .load, puis en masquant le div supérieur. Je suis très nouveau en programmation. J'ai du mal à travailler sur un sélecteur pour permettre à l'utilisateur d'aller "en arrière" montrant le div caché suivant, après le premier div montré, et de cacher le dernier exemple de div-faux-code ci-dessous.

<div class="slideShow" >image one (display = none)</div> 
<div class="slideShow" >image two (display = none)</div> 
<div class="slideShow" >image three </div> 
<div class="slideShow" >image four </div> 
<div class="slideShow" >image five </div> 
<div class="slideShow">image six </div> 

<a href="#" class="scrollUp" >Scrollup</a> 
<a href="#" class="scrollDown" >ScrollDown</a> 

Jquery permet de charger une nouvelle image et de la joindre en bas, et de masquer la première division en cours d'affichage.

$('.scrollDown').click(function() { 
$('.slideShow:last').after('<div class="slideShow"></div>'); // add a new div to the bottom. 
$('.appendMe:last').load('myimagescript.py'); // load in the image to the new div. 

// here I need to find a way of selecting in this example the first shown image (image three) and applying a .slideUp(); to it 

}); 

Jquery pour permet à l'utilisateur de revenir à une image qu'ils ont déjà vu et cacher la div au dernier shown bas

$('.scrollUp').click(function() { 

// here I need to find a way of selecting in this example the first hidden div (image two) after the first shown div (image three) and applying a slideDown(); to it. 

$('.slideShow:last').slideUp(); // hide the last image on the page - trouble is what happens if they user now clicks scrollDown - how do I reshow this div rather than just loading a new one? 


}); 

Answer 1

Je ne comprends pas tout à fait correctement, mais cette information peut aider ... vous devez faire correspondre la première div visible puis utilisez .prevAll() et le filtre pour obtenir le frère caché

$('div.slideShow:visible:first').prevAll(':hidden:first').slideDown(); 

Answer 2

un coup de feu dans l'obscurité, mais ...

sélection de la première représenté div et en le faisant glisser jusqu'à

$('.slideShow:visible:first').slideUp(); 

sélection de la première caché div après la d'abord montré div et glisser vers le bas ...

$('.slideShow:visible:first').next('.slideShow:hidden').slideDown() 

sélecteurs Psuedo FTW!

Answer 3

Quelque chose comme ce qui suit devrait faire l'affaire

$(function() { 
    $(".scrollUp").click(function() { 
    //Check if any previous click animations are still running 
    if ($("div.slideShow:animated").length > 0) return; 
    //Get the first visible div 
    var firstVisibleDiv = $("div.slideShow:visible:first"); 

    //Get the first hidden element before the first available div 
    var hiddenDiv = firstVisibleDiv.prev("div.slideShow"); 
    if (hiddenDiv.length === 0) return; //Hit the top so early escape 
    $("div.slideShow:visible:last").slideUp(); 
    hiddenDiv.slideDown(); 
    }); 
    $(".scrollDown").click(function() { 
    if ($("div.slideShow:animated").length > 0) return; 
    var lastVisibleDiv = $("div.slideShow:visible:last"); 
    if (lastVisibleDiv.next("div.slideShow").length === 0) { 
     //No next element load in content (or AJAX it in) 
     $("<div>").addClass("slideShow") 
        .css("display", "none") 
        .text("Dummy") 
        .insertAfter(lastVisibleDiv); 
    } 
    $("div.slideShow:visible:first").slideUp(); 
    lastVisibleDiv.next().slideDown(); 
    }); 
}); 

la seule chose que cette solution n'est de vérifier si est animé maintenant un élément qui était auparavant invisible. Cela résout certains des problèmes concernant plusieurs clics sur les liens qui se produisent avant la fin des animations. Si vous utilisez AJAX, vous devrez faire quelque chose de similaire (par exemple activer/désactiver une variable globale - ou simplement désactiver le lien déroulant) pour éviter que plusieurs requêtes ne soient faites au serveur en même temps ...

Answer 4

passé des heures aujourd'hui sur ce site en essayant de faire quelque chose de très similaire à ce qui a été posté dans cette question.

Ce que j'ai est Précédent | Liens suivant navigation faisant à travers une série de divs, se cachant et montrant.

Bien que ce que j'ai fini avec était différent de la réponse ici .... c'était celui qui m'a le plus obtenu où je devais être.

Alors, merci.

Et dans le cas où quelqu'un est intéressé, voici ce que je faisais:

<script language="javascript"> 

$(function() { 
    $("#firstPanel").show(); 
}); 

$(function(){ 
    $(".nextButton").click(function() { 
     $(".panel:visible").next(".panel:hidden").show().prev(".panel:visible").hide(); 
    }); 
}); 
$(function(){ 
    $(".backButton").click(function() { 
     $(".panel:visible").prev(".panel:hidden").show().next(".panel:visible").hide(); 
    }); 
}); 
</script> 

<style type="text/css"> 
    .defaultHidden { display: none; } 
    .navigation { display: block; width: 700px; text-align: center; } 
    #contentWrapper { margin-top: 20px !important; width: 700px; } 
    .nextButton { cursor: pointer; } 
    .backButton { cursor: pointer; } 
</style> 

<div class="navigation"> 
    <span class="backButton"><< Previous</span>&nbsp; | &nbsp;<span class="nextButton">Next >></span></button> 
</div> 
<div id="contentWrapper"> 
    <div id="firstPanel" class="panel defaultHidden"> 
     <img src="images/quiz/Slide1.jpg" width="640" /> 
    </div> 

    <div class="panel defaultHidden"> 
    <h1>Information Here</h1>  
    <p>Text for the paragraph</p> 
    </div> 

    <div class="panel defaultHidden"> 
    <h1>Information Here</h1>  
    <p>Text for the paragraph</p> 
    </div> 

    <div class="panel" style="display: none;"> 
    <img src="images/quiz/Slide4.jpg" width="640" /> 
     </div> 

    <div class="panel defaultHidden"> 
    <h1>Information Here</h1>  
    <p>Text for the paragraph</p> 
    </div> 

    <div class="panel defaultHidden"> 
    <img src="images/quiz/Slide6.jpg" width="640" /> 
    </div> 
    Repeat ad naseum... 
</div>