Utilisation de JQuery pour afficher et masquer les différents événements onClick de div

Question

Je souhaite afficher une div basée sur l'événement Onclick d'un lien.

Premier Cliquez - Afficher div1
Second Cliquez - Masquer restant DIV et Afficher DIV2
Troisième Cliquez - Hide reste des années div et montrer div3
Quatrième Cliquez - Hide reste des années div et montrer div1 => répéter la boucle et se poursuit ..

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> 

code Jquery:

$(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 lui-même d'abord cliquer mais il doit montrer div1 le premier clic comme mentionné.

Answer 1

Je vais essayer de mon coup.

---

EDIT: Après la deuxième si, pour éviter la variable globale utiliser il est préférable de faire ce qui suit

$(document).ready(function() { 
     $("#toggle_value").click((function(){ 
     var counter = 0; 
     return function() 
     { 
      $("#div" + counter).hide("fast"); 
      counter = (counter % 3) + 1; 
      $("#div" + counter).show("fast"); 
     } 
     })()); 
}); 

Answer 2

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; 
     } 
    }); 
}); 

Answer 3

Une façon simple serait d'introduire une variable qui a suivi des 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 ++; 

    }); 
}); 

Answer 4

Ma solution est un peu différent - je le ferais dépendant de l'état de la divs à l'heure actuelle (sur 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 prévenir - Je ne l'ai pas testé ce code :) Sur la base de ce qui suit pour déterminer la visibilité: http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_determine_the_state_of_a_toggled_element.3F

it helps

Answer 5

var c = 1; 
$("#toggle_value").click(function() 
{ 
    $("#div" + c).hide("fast");   
    $("#div" + ++c).show("fast"); 
    if (c > 3) c=1;  
}); 

Answer 6

je ferais probablement quelque chose comme: (Ce qui suit assume tous vos <div> s sont dans un conteneur avec 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"); 
    }); 
}); 

Answer 7

Je préfère utiliser méthode « filtre » et faire un peu plus facile avec le travail contre:

(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++; 
     }); 
    }); 

})(); 

Answer 8

La fonction .toggle jQuery prend un certain nombre de fonctions d'argument, de sorte que le problème est déjà résolu. Voir les documents sous Événements.

Answer 9

$("#toggle_value").click(function() 
{ 
    $("#div" + (++c) % 3).show().siblings().hide();   
} 

Answer 10

Que diriez-vous de cette

Working Example here - 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

Answer 11

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

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

Ensuite, 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 d'en-tête et le code ci-dessous dans la partie du 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 l'image différente cliquez pour afficher et masquer div.

Answer 12

<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>