Jquery Masquer les classes dans la classe parente en utilisant (this)

Question

Vous rencontrez des problèmes avec celui-ci. J'ai une page avec plusieurs produits, chemises, pantalons etc. Chaque produit vient dans les mêmes couleurs différentes: noir, bleu, vert etc. J'essaye d'écrire un certain jQuery que je peux utiliser pour tous les produits. Fondamentalement, j'ai un div, avec toutes les images de produits avec des classes pour chacun d'eux, par exemple, l'image du produit noir est class = "prodblack". Je voudrais utiliser les mêmes classes pour tous les produits. Mais la façon dont j'ai cette configuration maintenant si je clique sur l'échantillon bleu pour un produit TOUS les produits montrent le bleu, pas seulement le produit que je suis en train de cliquer sur.

Voici une partie du HTML, c'est juste un div de beaucoup, mais ils sont tous mis en place les mêmes, les mêmes classes, mêmes couleurs etc.

<div class="fb-col-md-4 fb-col-sm-6 col-xs-12" itemscope itemtype="http://schema.org/Product"> 
     <a href="#double_thick_blanket"> 
     <span class="product-wrap"> 
     <img alt="Double Thick Blanket" class="proddefault" onerror="this.onerror = null;this.src='/images/image-not-found.jpg'" src="<?php bloginfo('template_directory'); ?>/img/products/pants/pants-tan.jpg"> 
     <img alt="Double Thick Blanket" class="prodtan" onerror="this.onerror = null;this.src='/images/image-not-found.jpg'" src="<?php bloginfo('template_directory'); ?>/img/products/pants/pants-tan.jpg"> 
     <img alt="Double Thick Blanket" class="prodgreen" onerror="this.onerror = null;this.src='/images/image-not-found.jpg'" src="<?php bloginfo('template_directory'); ?>/img/products/pants/pants-green.jpg"> 
     <img alt="Double Thick Blanket" class="prodblue" onerror="this.onerror = null;this.src='/images/image-not-found.jpg'" src="<?php bloginfo('template_directory'); ?>/img/products/pants/pants-blue.jpg"> 
     <img alt="Double Thick Blanket" class="prodgray" onerror="this.onerror = null;this.src='/images/image-not-found.jpg'" src="<?php bloginfo('template_directory'); ?>/img/products/pants/pants-gray.jpg"> 
     <img alt="Double Thick Blanket" class="prodblack" onerror="this.onerror = null;this.src='/images/image-not-found.jpg'" src="<?php bloginfo('template_directory'); ?>/img/products/pants/pants-black.jpg"></span> 
     <span class="productSwatches"> 
       <span class="squareSwatch blue"></span> 
       <span class="squareSwatch gray"></span> 
       <span class="squareSwatch tan"></span> 
       <span class="squareSwatch green"></span> 
       <span class="squareSwatch black"></span> 
       <span style="clear:both"></span> 
     </span> 
     <section class="price-wrap"> 
      <h4 class="new-tree"><span itemprop="name">Double Thick Blanket</span> <em>$99.95</em></h4> 
     </section></a> 
</div> 

Et voici le Jquery, je commencé à jouer avec le bleu en utilisant swatch $ (ce) mais ne peut pas sembler le faire fonctionner:

jQuery(document).ready(function($){ 

     var hideAllButBlue = ".prodgreen,.prodtan,.prodblack,.prodgray,.proddefault"; 
     var hideAllButBlack = ".prodgreen,.prodtan,.prodblue,.prodgray,.proddefault"; 
     var hideAllButGreen = ".prodblack,.prodtan,.prodblue,.prodgray,.proddefault"; 
     var hideAllButTan = ".prodblack,.prodgreen,.prodblue,.prodgray,.proddefault"; 
     var hideAllButGray = ".prodblack,.prodgreen,.prodblue,.prodtan,.proddefault"; 

     $(".prodgreen,.prodtan,.prodblue,.prodblack,.prodgray").hide(); 
     $(".proddefault").show(); 

     $(".blue").click(function() { 
      $(this).parent('div').show('.prodblue'); 
      $(hideAllButBlue).hide(); 
     }); 

     $(".black").click(function() { 
      $('.prodblack').show(); 
      $(hideAllButBlack).hide(); 
     }); 

     $(".gray").click(function() { 
      $('.prodgray').show(); 
      $(hideAllButGray).hide(); 
     }); 

     $(".green").click(function() { 
      $('.prodgreen').show(); 
      $(hideAllButGreen).hide(); 
     }); 

     $(".tan").click(function() { 
      $('.prodtan').show(); 
      $(hideAllButTan).hide(); 
     }); 

    });  

Toute aide serait grandement appréciée, merci

Answer 1

J'ai finalement eu de Nevermind, j'utilisais la .parent faux je devais ajouter la méthode .find à cela

 $('.prodcontainer .blue').click(function(){ 
      $(this).parents('.prodcontainer').find('.prodblue').show(); 
      $(this).parents('.prodcontainer').find(hideAllButBlue).hide(); 
     }); 

     $(".black").click(function() { 
      $(this).parents('.prodcontainer').find('.prodblack').show(); 
      $(this).parents('.prodcontainer').find(hideAllButBlack).hide(); 
     }); 

     $(".gray").click(function() { 
      $(this).parents('.prodcontainer').find('.prodgray').show(); 
      $(this).parents('.prodcontainer').find(hideAllButGray).hide(); 
     }); 

     $(".green").click(function() { 
      $(this).parents('.prodcontainer').find('.prodgreen').show(); 
      $(this).parents('.prodcontainer').find(hideAllButGreen).hide(); 
     }); 

     $(".tan").click(function() { 
      $(this).parents('.prodcontainer').find('.prodtan').show(); 
      $(this).parents('.prodcontainer').find(hideAllButTan).hide(); 
     }); 

Answer 2

J'ai passé un certain temps l'autre jour à écrire une réponse à cette question. Je devais m'éloigner et l'oublier. Quand je suis revenu, je vois que vous l'avez compris. Cela étant dit, take a look at this jsFiddle. Il réduit le nombre d'événements de clic à un seul.

jQuery(document).ready(function($){ 

     // All elements with .prod and .default class, display 
     // I hid all .prod initially with CSS to help with FOUC  
     $('.prod.default').addClass('selected'); 

     // Any acceptable color 
     var colors = ['tan','blue','green','black','gray']; 

     $(".squareSwatch").click(function() { 

      // Get the parent div 
      var $product_container = $(this).parentsUntil('div'); 

      // Default swatch 
      var $default = $product_container.find('.prod.default'); 

       // Get the classes of this .squareSwatch 
      var classes = $(this).attr('class'); 

      // Split classes on space 
      classes = classes.split(' '); 

      // Get the target color 
      // $(classes) is an array of .squareSwatch classes 
      // colors is an array of all acceptable colors 
      // $(classes).not(colors) returns whichever classes are not colors 
      // So $(classes).not($(classes).not(colors)) 
      // is first getting an array of every class that isn't a color 
      // which, when matched against all classes again, returns 
      // only the colors; preferably one 
      // Either way, since it returns an array, [0] gets the first item 
      var target_color = $(classes).not($(classes).not(colors))[0]; 

      var target = $product_container.find('.prod.'+target_color); 

      // If target color found (not undefined) 
      if(typeof(target_color) !== 'undefined'){ 

       // Find and hide all elements that aren't the target color 
       $product_container.find('.prod:not(.'+target_color+')').removeClass('selected'); 

       // Show the target color 
       target.addClass('selected'); 

      }else{ // otherwise default 

       // Hide anything that isn't default 
       $product_container.find('.prod:not(.default)').removeClass('selected') 

       // Show the default 
       $default.addClass('selected'); 

      } 
     }); 

    }); 

Il pourrait être étoffé un peu plus, mais peut-être que ce sera utile!