jQuery Basculer Afficher / Masquer avec plusieurs ID DIV

CODE:

$(document).ready(function() { $('.toggle').hide(); $('.show').click(function(){ $('.toggle').toggle('slow'); $(this).attr('src','images/checkmark2.jpg'); },function(){ $('.toggle').toggle('slow'); $(this).attr('src', 'https://stackoverflow.com/questions/2082218/jquery-toggle-show-hide-w-multiple-div-ids/images/checkmark1.jpg'); return false; }); });

HTML:

 Header Text

Le texte masqué est dans une “classe” de classe div à afficher lorsque vous cliquez sur l’image checkmark1.jpg. Avec plusieurs “div” classes div, elles se développent toutes en même temps.

Lorsque “basculer” est défini sur ID # dans le script et le code HTML, ils se développent indépendamment (comme je le voudrais), mais vous ne pouvez pas utiliser le même nom DIV ID #. Alors, comment pourrais-je changer le code pour utiliser plusieurs ID DIV à bascule; ou utilisez des classes “à bascule” qui ne développent pas tout à la fois ???

ICI est un lien direct vers mon code. http://www.flipflopmedia.com/test/ToggleTEST_html.txt Lorsque j’essaie de l’insérer, il est rendu et ne s’affiche pas afin que vous puissiez réellement le voir. Oui, j’utilise le bouton de code ‘entrer le code ici’ pour l’appliquer, cela ne fonctionne pas!

Puisque vous n’avez pas fourni de code HTML à partir duquel travailler, j’en ai associé un script qui fonctionne.

HTML

  Header Text 1 This is some hidden text #1
 Header Text 2 This is some hidden text #2

Script (mis à jour pour fonctionner avec votre code HTML)

 $(document).ready(function(){ $('.toggle').hide(); $('.show').click(function(){ var t = $(this); // toggle hidden div t.next().next().toggle('slow', function(){ // determine which image to use if hidden div is hidden after the toggling is done var imgsrc = ($(this).is(':hidden')) ? 'https://stackoverflow.com/questions/2082218/jquery-toggle-show-hide-w-multiple-div-ids/images/checkmark1.jpg' : 'images/checkmark2.jpg'; // update image src t.attr('src', imgsrc ); }); }) })

La fonction “clic” ne vous permet d’append qu’une fonction (celle qui est déclenchée lorsque vous cliquez sur le ou les éléments sélectionnés). Mais vous passez deux. Vous voudrez probablement utiliser la fonction “bascule” à la place. Voir cette question pour plus d’informations:

Etat de bascule jQuery

Utilisez à la fois un identifiant et une classe:

 Hello World

Lorsque vous avez besoin de le gérer spécifiquement:

 $("#myP1").toggle();

Quand vous voulez vous en occuper avec le rest:

 $(".toggle").hide();

Vous voulez pouvoir dériver l’ID des éléments à basculer des atsortingbuts de l’élément sur lequel vous cliquez. En d’autres termes, en vous basant uniquement sur les informations contenues dans les atsortingbuts de l’élément sur lequel vous cliquez, vous pouvez créer l’ID (et / ou les classes) pour le ou les éléments à basculer.

Établissez une corrélation entre l’identifiant de l’élément et le gestionnaire onclick avec l’identifiant du ou des éléments que vous souhaitez basculer. Par exemple, si vous cliquez sur un img avec id = “checkmark1” et que l’élément en cours de basculement a id = “checkmark1_content”, votre gestionnaire de clics peut être:

 $('#' + this.id + '_content').toggle();

Les classes seraient utilisées pour basculer plus d’un (ou plusieurs) éléments:

 $('.' + this.id + '_content').toggle();

Sur la base du scénario de test fourni dans les commentaires ci-dessous, voici la solution:

     Toggle Test       Toggle 1
 Toggle 2
 Toggle 3
 Toggle Everything
 
 only toggle1
 only toggle2
 only toggle3
 always toggled
 toggle1 and toggle2
 toggle1 and toggle3
 toggle2 and toggle3
 toggle1, toggle2 and toggle3

Le problème réside ici:

 $('.toggle').toggle('slow');

Ce morceau de code va bien sûr basculer tous les éléments HTML avec class="toggle" .

En fonction de votre structure HTML, procédez comme suit:

 $(function() { $('.toggle').hide(); $('.show').click(function() { $(this).next('.toggle').toggle('slow'); $(this).attr('src', 'images/checkmark2.jpg'); return false; }, function() { $(this).next('.toggle').toggle('slow'); $(this).attr('src', 'https://stackoverflow.com/questions/2082218/jquery-toggle-show-hide-w-multiple-div-ids/images/checkmark1.jpg'); return false; }); });