jQuery eq pour afficher fondu dans le bloc

Question

Ce que je suis en train de faire est de disparaître dans un bloc sur le CSS est l'affichage sans pareil est ici ce que je suis:

CSS:

.white_content { 
    display: none; 
    position: relative;; 
    width: 5%; 
    height: 5%; 
    padding: 24px; 
    border: 16px solid orange; 
    background-color: some; 
    z-index:1; 
} 

jQuery

$(function(){ 
    $("#act1").click(function() { 
     $('li:eq(0)').fadeIn(400); 
    }); 
    $("#act2").click(function() { 
     $('li:eq(1)').fadeIn(400); 
    }); 
}); 

un HTML:

<div id="act1">first click</div> 
<div id="act2">second click</div> 

<ul> 
    <li><div id="tos" class="white_content"> 
    some text... 
    </div></li> 

    <li><div id="tos" class="white_content"> 
    other some text 
    </div></li> 
</ul> 

Si je change sur le jQuery li:eq(0) à #tos cela fonctionnera bien mais je ne peux pas le faire fonctionner avec li:eq(0) puisque c'est ce que j'essaye de faire.

Answer 1

Il y a plusieurs problèmes ici. Tout d'abord, id s doit être unique - ils ne peuvent pas répéter comme vous l'avez fait dans le code que vous avez ici. Deuxièmement, la propriété display: none est définie sur div.white_content, pas li, votre sélecteur doit donc être li:eq(n) div.white_content.

Même alors ce code devrait être facilement réinscriptible à quelque chose plus propre, comme ceci:

$('div[id^=act]').click(function(){ 
    var n = parseInt(this.id.substring(3), 10); 
    $('li').eq(n-1).find('.white_content').fadeIn(400); 
}); 

---

Compte tenu de votre HTML, je pense que c'est ce que vous avez besoin:

// For the two buttons 
$('div[id^=act]').click(function(){ 
    var n = parseInt(this.id.substring(3), 10); 
    $('li').eq(n-1).find('.white_content').fadeToggle(400); 
}); 

// For the close button 
$('.close').click(function(){ 
    $(this).closest('.tos').fadeOut(400); 
}); 

Vous » re utilisant dupliqué id s, qui est HTML invalide. J'ai pris la liberté de les changer en cours, ce qui est la bonne façon de procéder. La fonction closest recherche l'ancêtre le plus proche correspondant au sélecteur, dans ce cas le div qui contient les éléments.

Sur une note de côté, puisque li sont des éléments de niveau bloc, vous pouvez sauter le div et mettez tous vos contenus dans l'élément li directement, ce qui élimine une couche de HTML.

Answer 2

essayer:

$(function(){ 
    $("#act1").click(function() { 
     $('li:eq(0) div.white_content').fadeIn(400); 
    }); 
    $("#act2").click(function() { 
     $('li:eq(1) div.white_content').fadeIn(400); 
    }); 
});