jQuery - Afficher/masquer les éléments individuellement avec le même nom de classe

Je suis un noob extrême avec jQuery. J'essaye de montrer un article basé sur son lien correspondant ... sans montrer les autres articles. Tous mes liens ont le même nom de classe, ainsi que les travées.jQuery - Afficher/masquer les éléments individuellement avec le même nom de classe

Je ne sais pas si cela peut être fait ou non ... ça me dérange depuis trop longtemps sur celui-ci.

Voici le code:

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>jQuery - Show/Hide items individually with same class name</title> 

<style type="text/css"> 
* { outline: none; } 
a { display: inline-block; margin-right: 10px; float: left; text-decoration: none;  padding: 10px; } 
span { text-align: center; display: inline; padding: 20px; background: blue; color: #fff; float: left; margin-right: 20px; width: 120px; } 
div#wrap { float: left; clear: left; margin-top: 10px; } 
div#linkOne, div#linkTwo, div#linkThree { background: #ccc; display: inline-block;  float: left; margin-right: 20px; } 
</style> 

<script type="text/javascript"> 

    $(document).ready(function(){ 

     var spans = $("span").each(function(j){ $(this).attr({class : "myDiv" + j}) }); 
     $(spans).hide(); 

     $(".show").each(function(i){ 
     $(this).attr({class : "show" + i}); 
     $(this).bind("click", function(e){ 
     $(spans).show(); 
     }); 
     }); 

     $(".hide").click(function(){ 
     $(spans).hide(); 
     }); 

    }); 

</script> 
</head> 

<body> 
    <div id="linkOne"> 
    <a class="show" href="#">Show1</a> 
    <a class="hide" href="#">Hide1</a> 
    </div> 
    <div id="linkTwo"> 
    <a class="show" href="#">Show2</a> 
    <a class="hide" href="#">Hide2</a> 
    </div> 
    <div id="linkThree"> 
    <a class="show" href="#">Show3</a> 
    <a class="hide" href="#">Hide3</a> 
    </div> 

    <div id="wrap"> 
    <span class="myDiv">div1</span> 
    <span class="myDiv">div2</span> 
    <span class="myDiv">div3</span> 
    </div> 

</body> 
</html>

Source

2009-09-26 Scott

peut-être var = $ couvre ("span"). Each (fonction (j) {$ (this) .addClass ("myDiv" + j)}) ; –

Essayez d'ajouter un autre identifiant de la branche div à l'intervalle que vous voulez ouvrir:

changement div1 à div1

Puis ajouter la magie jQuery:

$(function(){ 
    // First hide all hide links initially. 
    $(".hide").hide(); 

    // then attach hide handler 
    $(".hide").bind("click", function(){ 
     $(this).siblings(".show").show(); 
     $(this).hide(); 
     $(".myDiv." + $(this).attr("id")).show(); 
    }); 

    // and the show handler 
    $(".show").bind("click", function(){ 
     $(this).siblings(".hide").show(); 
     $(this).hide(); 
     $(".myDiv." + $(this).attr("id")).hide(); 
    }); 
});

HTH Alex

Source

2009-09-26 11:59:40

Wow ... merci beaucoup Alex. Cela a fait l'affaire! – Scott

je ne suis pas sûr que je vous comprends. $ ('# linkOne .hide'), par exemple, ne sélectionnera que les éléments de la classe 'hide' qui sont des enfants de #linkOne

Source

2009-09-26 11:56:38

Est-ce ce que vous voulez?

MISE À JOUR Maintenant, montrer des liens d'affichage au début et bascule en conséquence, également bascule le contenu (.myDiv) en conséquence.

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.myDiv').hide(); 
     $('.hide').hide(); 

     $('.show').click(function() { 
     $(this).hide(); 
     $('.hide:eq(' + $('a.show').index(this) + ')').show(); 
     $('.myDiv:eq(' + $('a.show').index(this) + ')').show(); 
     }); 

     $('.hide').click(function() { 
     $(this).hide(); 
     $('.show:eq(' + $('a.hide').index(this) + ')').show(); 
     $('.myDiv:eq(' + $('a.hide').index(this) + ')').hide(); 
     }); 
    }); 
</script>

Source

2009-09-26 12:09:42

Ok, mais vous devez aussi montrer/cacher les liens. – tvanfosson

Mis à jour pour l'inclure –

Une solution simple serait:

$(".show").each(function(i){ 
    $(this).attr({class : "show" + i}); 
    $(this).bind("click", function(e){ 
     $(".myDiv" + i).show(); 
    }); 
});

Source

2009-09-26 12:09:55

Tant que vos liens sont dans le même ordre que vos portées, vous devriez être en mesure d'obtenir par sans « magique » spéciale avec la classe noms:

<style type="text/css"> 
...note change below... 
.link { background: #ccc; display: inline-block;  float: left; margin-right: 20px; } 
</style>

Utilisez l'ordre du lien pour sélectionner l'intervalle correct à partir de l'emballage.

$(document).ready(function(){ 

    $('#wrap span').hide(); 

    $(".show").click(function() { 
     var index = $('.show').index(this); 
     $('#wrap span').eq(index).show(); 
     $(this).hide(); 
     $(this).siblings('.hide').show(); 
    }); 

    $(".hide").click(function(){ 
     var index = $('.hide').index(this); 
     $('#wrap span').eq(index).hide(); 
     $(this).hide(); 
     $(this).siblings('.show').show(); 
    }); 

});

Remarquez la modification de la classe de liaison au lieu de divs nommés.

<div class="link"> 
    <a class="show" href="#">Show1</a> 
    <a class="hide" href="#">Hide1</a> 
</div> 
<div class="link"> 
    <a class="show" href="#">Show2</a> 
    <a class="hide" href="#">Hide2</a> 
</div> 
<div class="link"> 
    <a class="show" href="#">Show3</a> 
    <a class="hide" href="#">Hide3</a> 
</div>

div1 div2 div3

Source

2009-09-26 12:17:46 tvanfosson

jQuery - Afficher/masquer les éléments individuellement avec le même nom de classe

Répondre

Questions connexes