Impossible de cibler l'élément par classe affectée par jQuery

Question

J'essaie d'afficher et de masquer différents blocs d'informations.

<div id="modLeftCol"> 
     <div id="cont1Ctn">Content</div> 
     <div id="cont2Ctn">Content</div> 
     <div id="cont3Ctn">Content</div> 
     <div id="cont4Ctn">Content</div> 
</div> 

Pour montrer d'abord le premier choix de contenu, une autre fonction cible le div id approprié par jQuery et définit l'élément à bloquer, se fane dans l'opacité et attribue la div la classe « modActive » par .addClass() . Ainsi, nous obtenons:

<div id="modLeftCol"> 
     <div id="cont1Ctn">Content</div> 
     <div id="cont2Ctn">Content</div> 
     <div id="cont3Ctn" class="modActive" style="display: block; opacity: 1;">Content</div> 
     <div id="cont4">Content</div> 
</div> 

Pour masquer le visible actuellement, je dois cibler la DIV avec la classe de "modActive", mais en utilisant:

$(".modActive").animate({..}); 
nor 
$("div.modActive").animate({..}); 
nor 
$("#modLeftCol > div.modActive").animate({..}); 

n'est pas working.I peut attribuer des styles à .modActive dans la feuille de style externe et ils ciblent l'élément sans problème.

Je peux obtenir le script en faisant $ ("modLeftCol> div"), mais le problème est que je reçois des bugs où il applique la fonction à tous les DIV dans #modLeftCol et il ne supprime pas toujours le classe "modActive". Dois-je utiliser .pushStack()? Quelle serait la syntaxe correcte pour cela?

Voici mon javascript avec ma fonction de problème au fond:

$(document).ready(function() { 
     //Initialize DOM Elements  
     var mapCtn = $("#mapModalCtn"); 
     var cityLink = $('#modRightCol a'); 
     var allInfoCtn = $('#modLeftCol > div'); 

     //Show the Map Container 
     $(".locBox").delegate("a", "click", function(e) { 

      // Initialize info for clicked location 
      var initLocInfo = $(this).attr("rel") + "Ctn"; 
      $('#' + initLocInfo).show().css('opacity','1').addClass('modActive'); 

      // Initialize Button State on Map 
      var initLocBtn = $(this).attr("rel") + "Btn"; 
      $('#' + initLocBtn).css('backgroundPosition','top'); 

      // Open Map Box 
      mapCtn.show().animate({ 
       opacity: 1 
      }, 500); 
      e.preventDefault(); 
     }); 

     //Hide the Map Container 
     $("#modalTitle").delegate("a", "click", function(e) { 
      mapCtn.animate({ 
       opacity: 0 
      }, 500, function() { 
       mapCtn.hide(); 
       allInfoCtn.removeClass('modActive').hide(); 
       cityLink.css('backgroundPosition','bottom'); 
      }); 
      e.preventDefault(); 
     }); 

     //Show the info for the selected Location on the Map 
     $("#modRightCol").delegate("a", "click", function(e) { 
      e.preventDefault(); 
      var locInfo = $(this).attr("rel") + "Ctn"; 
      var locBtn = $(this).attr("rel") + "Btn"; 
      var newCtn = $('#' + locInfo); 

      //Change Map Location Button State 
      cityLink.css('backgroundPosition','bottom'); 
      $(this).css('backgroundPosition','top'); 

      //Hide currently visible information 
      if (allInfoCtn.hasClass('modActive')) { 

       allInfoCtn.animate({ 
        opacity: 0 
       }, 1000, function(){ 
        allInfoCtn.hide().removeClass("modActive"); 

        //Show information related to location clicked 
        newCtn.show().animate({ 
          opacity: 1 
         }, 1000, function(){ 
          newCtn.addClass('modActive'); 
         }); 
       }); 
      } 


     }); 

    }); 

Answer 1

Ainsi, au lieu d'essayer de cibler la classe, j'ai décidé de cibler l'ID de l'élément par l'intermédiaire de la classe et je l'.each() classe pour charger l'ID dans une variable que je pourrais référencer au lieu de faire une instruction if.

allInfoCtn.each(function() { 
       if($(this).hasClass('modActive')) { 
        visibleCtn = $(this).attr('id'); 
       } 
      });