À l'aide de JQuery comment afficher et masquer les différents div à l'événement onClick

Je voudrais afficher un div basé sur l'événement Onclick d'un lien.

Cliquez d'abord - Afficher div1
Deuxième Clic - Masquer le reste de la div et de Montrer div2
Troisième Clic - Masquer le reste de la div et de montrer div3
Quatrième Cliquez - Masquer le reste de la div et de montrer div1 => répéter la boucle et s'en va..

Code Suit:

<div class="toggle_button">
      <a href="javascript:void(0);" id="toggle_value">Toggle</a>
</div>


<div id='div1' style="display:none;"> 
  <!-- content -->
</div>

<div id='div2' style="display:none;"> 
  <!-- content -->
</div>

<div id='div3' style="display:none;"> 
  <!-- content -->
</div>

Jquery Code :

$(document).ready(function() {
        $("#toggle_value").click(function(){
           $("#div1").show("fast");
           $("#div2").show("fast");
           $("#div3").show("fast");
        });
});

Le code ci-dessus montre tous les divs sur cliquez d'abord sur lui-même, mais il doit afficher div1 sur cliquez d'abord comme mentionné.

OriginalL'auteur Webrsk | 2009-05-27

5

Je vais essayer de mon coup.

EDIT:
Après la deuxième cependant, pour éviter une variable globale, il est préférable d'effectuer les opérations suivantes
```
$(document).ready(function() {
        $("#toggle_value").click((function(){
        var counter = 0;
        return function()
        {
           $("#div" + counter).hide("fast");
           counter = (counter % 3) + 1;
           $("#div" + counter).show("fast");
        }
        })());
});
```
Hmm... c'est intéressant. Mais le 4 cliquez sur il cache tous les div et le 5 cliquez dessus montre la div1 de nouveau.Manquant tout cas ?!
J'ai raté le point il à la parcourir tout le temps. Fixe.
Artem alors qu'il a été fonctionne correctement lorsque le var est mondial, après j'ai essayé la récente posté le code qu'il cesse de fonctionner ..
Cela suppose que "#div" + compteur est en fait la prochaine div à afficher. C'est exactement la même contrainte de vous critiquer dans ma réponse. Vous comptez sur la fiabilité de noms, je m'appuie sur l'ordre du document. Où est la différence?
Tout d'abord, il l'a été décrit dans la question. Et deuxièmement, il pourrait être facilement modifié pour utiliser la cartographie tableau de chaînes de caractères avec des divs noms. Alors que votre solution est plus étroit cas. @Webrsk: Merci pour indiquer une erreur. A été résolu. Et pour ceux qui aime downvote, s'il vous plaît être gentil et explique-toi, je peux comprendre en bas à droit de vote de complètement inutile de répondre, mais quel est le problème ici?

OriginalL'auteur Artem Barger

Vous devez ajouter un compteur dans la fonction.

$(document).ready(function() {
    var count = 0;

    $("#toggle_value").click(function(){
        if (count == 0) {
            $("#div1").show("fast");
            $('#div2').hide();
            count++;
        }
        else if (count == 1) {
            $("#div2").show("fast");
            ...
            count++;
        }
        else if (count == 2) {
            $("#div3").show("fast");
            ....
            count++;
        }
        else {
             $('div').hide();
             count=0;
        }
    });
});

ce dernier reste-la déclaration doit indiquer le premier div, comme il veut qu'il la boucle.
Merci Peter . Et comme peirix mentionné il ya besoin de montrer le premier div comme une boucle.Mais dans ce 4ème clic, il permet de masquer tous les divs plutôt que de montrer la première div.
Yep ce code est de la merde.
C'est l'une des solution différente et de travailler si nous changeons le cas d'autre à $('#div2').hide(); $("#div").afficher("fast"); $('#div1').hide(); compteur=1;

OriginalL'auteur Peter Stuifzand

Comment à ce sujet

Exemple de travail ici - ajouter /modifier à l'URL pour modifier le code

$('html').addClass('js'); //prevent hiding divs on DOM ready from 'flashing'

$(function() {

  var counter = 1;

  $('#toggle_value').click(function() {
    $('div','#container')
      //to stop current animations - clicking really fast could originally
      //cause more than one div to show 
      .stop() 
      //hide all divs in the container
      .hide() 
      //filter to only the div in question
      .filter( function() { return this.id.match('div' + counter); })
      //show the div 
      .show('fast');

    //increment counter or reset to 1 if counter equals 3
    counter == 3? counter = 1 : counter++; 

    //prevent default anchor click event
    return false; 

  });

});

et HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Div Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">

    body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
    .display { width:300px; height:200px; border: 2px solid #000; }
    .js .display { display:none; }

</style>
</head>
<body>
<div class="toggle_button">
      <a href="#" id="toggle_value">Toggle</a>
</div>
<br/>
<div id='container'>
    <div id='div1' class='display' style="background-color: red;"> 
        div1
    </div>

    <div id='div2' class='display' style="background-color: green;"> 
        div2
    </div>

    <div id='div3' class='display' style="background-color: blue;"> 
        div3
    </div>
<div>

</body>
</html>

Cela pourrait facilement être enveloppé dans un plugin

OriginalL'auteur Russ Cam

Un moyen simple serait d'introduire une variable qui a permis de suivre les clics, donc quelque chose comme ceci:

var tracker = 0;    
$(document).ready(function() {
    $("#toggle_value").click(function(){
       if(tracker == 0)
       {
          $("#div1").show("fast");
       }else if(tracker ==1)

       etc etc

       tracker ++;

    });
});

OriginalL'auteur ilivewithian

0

Ma solution est un peu différent - je le ferais dépend de l'état de la vrd à l'heure actuelle (au clic). Voir ci-dessous pour ce que je veux dire par là.
```
$(document).ready(function() {
    $("#toggle_value").click(function(){
       if ($("#div1).is(':visible')) { //Second click
            //Hide all divs and show d2
            $("#div1").hide();
            $("#div2").show("fast");
            $("#div3").hide();
            $("#div4").hide();
       } else if ($("#div2").is(':visible')) { //Third click
            //follow above example for hiding all and showing div3
       } else if ($("#div3").is(':visible')) { //Fouth click
            //follow above example for hiding all and showing div1
       } else { //first click
            //All divs should be hidden first. Show div1 only.
            $("#div1").show("fast");
       }
    });
});
```
Juste pour vous avertir - je n'ai pas testé ce code 🙂
Selon les indications suivantes pour la détermination de la visibilité: http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_determine_the_state_of_a_toggled_element.3F

Espère que cela aide

Ne pas coder en dur quelque chose qui peut être dynamique. Si vous souhaitez modifier ce code pour intégrer 100 divs? Allez-vous le code de 400 lignes de confusion de l'ifs et du code à répétition?
Bien que j'avais une autre question, et non pas ce qui était demandé. Je l'ai pris plus de dire qu'il n'y avait que les 3 divs, et la div noms ne seraient pas normalement être numérotées et peuvent être des noms réels. Je prends votre point cependant.

OriginalL'auteur Mark Embling

Je préfère utiliser "filtre" de la méthode et la rendre un peu plus facile de travailler avec compteur:

(function () {
    var divCounter = 0, divs;

    $(function () {
        divs = $('#div1, #div2, #div3');
        $('#toggle_value').click(function (e) {
            divs.hide() //hide other divs
                .filter(function (index) { return index == divCounter % 3; }) //select appropriate div
                .show('fast'); //and show it

            divCounter++;
        });
    });

})();

OriginalL'auteur Alexander Ulizko

0

Je serais probablement faire quelque chose comme: (ce qui suit suppose tous vos <div>s sont dans un conteneur avec l'id "conteneur")
```
$(document).ready(function() {
  var $allDivs = $("#container > div");
  var counter = 0;

  $("#container > div").click(function(){
    counter = counter < $allDivs.length - 1 ? counter + 1 : 0;
    $allDivs.not(":eq("+counter +")").hide("fast");
    $allDivs.eq(counter).show("fast");
  });
});
```
ici, vous faites très fort hypothèse que la division est commandée dans un conteneur selon le numéro d'identification, qui peut être fausse en général
ne pensez-vous pas qu'il y est plus de divs dans le récipient que décrit?
Penser à ce sujet, vous avez raison. D'autre part, si elles sont présentées de façon séquentielle dans un ordre particulier, pourquoi ne pas les mettre dans cet ordre particulier? Au lieu de créer des "ordonné" id attributs pour un non ordonnée ensemble d'éléments.
Il pourrait certains contrainte de conception.
Pourrait être. Otoh, que, la plupart du temps vous écrire du code JavaScript, vous pouvez aussi contrôler le HTML processus de génération. La commande des divs la bonne façon ne devrait pas être trop compliqué, et la question implique qu'ils le sont déjà. Eh bien... si ce n'est pas possible, la solution ci-dessus n'est, certes, pas de travail.

OriginalL'auteur Tomalak
0

L' .fonction de bascule en jQuery prend un certain nombre d'arguments des fonctions, de sorte que le problème est déjà résolu. Voir les docs sous Événements.

OriginalL'auteur solsson
0
```
$("#toggle_value").click(function()
{
   $("#div" + (++c) % 3).show().siblings().hide();        
}
```
et si ces divs ne sont pas des frères et sœurs?
Ils sont dans l'exemple. Ses comme de dire que si ils ne sont pas sur la même page? Ce qui si elles sont des zones de texte. Si vous exécutez ce sur l'iPhone?
Drôle O_o. Dans l'exemple, vous avez le raccourcir exemple de code, qui, je crois, dans la vraie beaucoup plus compliqué en général, de sorte que votre code vous permet de masquer tous, de frère, de n'importe quoi.

OriginalL'auteur Antony Carthy
0
```
var c = 1;
$("#toggle_value").click(function()
{
   $("#div" + c).hide("fast");        
   $("#div" + ++c).show("fast");
   if (c > 3) c=1;       
});
```
Merci pour le poster. Juste corrigé l'erreur de syntaxe dans le code que vous avez posté, et j'ai essayé. var c = 1; $("#toggle_value").cliquez sur(function(){ $("#div" + c).cacher("fast"); if (c > 3), c=1; $("#div" + c++).afficher("fast"); }); Premier 3 clics fonctionne bien après qu'il montre 2 divs en même temps...
utiliser mon deuxième solution sur cette page, plutôt...
J'ai édité ce devrait maintenant fonctionner...

OriginalL'auteur Antony Carthy

Vous devez d'abord ajouter une requête de base de fichier:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Puis vous devez ajouter le code suivant:

<script type="text/javascript">
    $(document).ready(function () {
        $("#hide").click(function(){
            $(".slider_area").hide(1000);
            $("#show").css("display","block");
            $("#hide").css("display","none");
        });
        $("#show").click(function(){
            $(".slider_area").show(1000);
            $("#show").css("display","none");
            $("#hide").css("display","block");
        });
    });
</script>

Ajoutez le code ci-dessus dans la partie en-tête et le code ci-dessous dans la partie de corps.

<img src="images/hide-banner.png" id="hide" class="link right"/>
<img src="images/show-banner.png" id="show" class="link right dis" />

Le code est prêt pour les différentes cliquez sur l'image pour afficher et masquer div.

OriginalL'auteur Ramesh Prajapati

<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<script>
var temp = 0;
var temp1 = 0;
$("#div_<%=id>").click(function(){
    if (temp1 == 0)  {
        $('#' + temp).hide();
        temp = 'Hide_<%=id>';
        $('#Hide_<%=id>').show();
        temp1 = 1;
        }
        else{
        $('#' + temp).hide();   
        temp = 'Hide_<%=id>';
        $('#Hide_<%=id>').show();
        temp1 = 0;
        }
});
</script>

OriginalL'auteur Rajesh

Vous devez vous connecter pour publier un commentaire.