fadeOut() ne fait qu'effacer le premier élément

Par défaut, plusieurs DIVs sont masquées, puis je les masque lorsque l'utilisateur clique sur un bouton donné. Cela fonctionne bien mais quand j'essaie de fermer un DIV .holder en utilisant un span dans le DIV .holder, seul le premier fonctionne. Quand je clique sur les autres, rien ne se passe. Je n'obtiens aucune erreur ou aucune sorte de rétroaction visuelle.fadeOut() ne fait qu'effacer le premier élément

Le balisage:

<div class="holder" id="window_one"> 
    <div class="title_bar"> 
     <p>Window 1</p> 
     <div class="control_holder"> 
      <span class="controls" id="close">X</span> 
      <span class="controls" id="minimize">_</span> 
     </div> 
    </div> 
    <div class="interface"> 
     <p>Testing123</p> 
    </div> 
</div> 
<div class="calculator" id="window_two"> 
    <div class="title_bar"> 
     <p>Window 2</p> 
     <div class="control_holder"> 
      <span class="controls" id="close">X</span> 
      <span class="controls" id="minimize">_</span> 
     </div> 
    </div> 
    <div class="interface"> 
     <p>Testing123</p> 
    </div> 
</div>

Le jQuery:

$(document).ready(function() { 
    $('#close').click(function() { 
     $(this).parents('.holder').fadeOut(250); 
    }); 
});

Que suis exactement je fais mal ici? J'utilise jQuery 1.10.2 si cela fait une différence.

Je démo le code sur jsFiddle mais semble être down atm.

Source

2013-09-22 Kasim Ahmic

Ids doit être unique, les classes d'utilisation –

vous pouvez avoir plusieurs classes pour un objet, il suffit de les séparer avec l'espace , ie class = "class1 class2" cet objet peut être addreses comme .class1 ou .class2 .... donc utilisez la classe au lieu des ids uniques ... et puis n'oubliez pas qu'il vous donnera un tableau donc lancez array et faites le pour chaque élément> | –

@ M.Svrcek Oups, oublié à ce sujet, merci! –

Vous ne pouvez pas avoir le même identifiant de deux éléments sur la page. Si vous voulez faire donner comme un nom de classe comme -

<div class="holder" id="window_one"> 
    <div class="title_bar"> 
     <p>Window 1</p> 
     <div class="control_holder"> 
      <span class="controls close">X</span> 
     </div> 
    </div> 
    <div class="interface"> 
     <p>Testing123</p> 
    </div> 
</div> 
<div class="calculator" id="window_two"> 
    <div class="title_bar"> 
     <p>Window 2</p> 
     <div class="control_holder"> 
      <span class="controls close">X</span> 
     </div> 
    </div> 
    <div class="interface"> 
     <p>Testing123</p> 
    </div> 
</div>

et Jquery comme -

$(document).ready(function() { 
    $('.close').click(function() { 
     $(this).parents('.holder').fadeOut(250); 
    }); 
});

Espérons que cela aidera.

Source

2013-09-22 22:55:39 Ritesh

A travaillé parfaitement, merci! J'ai oublié la chose des classes multiples: P –

Voici comment il devrait être:

<div class="holder" id="window_one"> 
    <div class="title_bar"> 
     <p>Window 1</p> 
     <div class="control_holder"> 
      <span class="controls close">X</span> 
     </div> 
    </div> 
    <div class="interface"> 
     <p>Testing123</p> 
    </div> 
</div> 
<div class="calculator" id="window_two"> 
    <div class="title_bar"> 
     <p>Window 2</p> 
     <div class="control_holder"> 
      <span class="controls close">X</span> 
     </div> 
    </div> 
    <div class="interface"> 
     <p>Testing123</p> 
    </div> 
</div>

et JavaScript:

$(document).ready(function() { 
    $('.close').click(function(e) { 

     $(this).parents('.holder').forEach(function(){ 

        $(this).fadeOut(250); 

         }); 

     e.preventDefault(); 
    }); 

});

Source

2013-09-23 01:27:35

fadeOut() ne fait qu'effacer le premier élément

Répondre

Questions connexes