Jquery Klassen innerhalb der Eltern Div verstecken mit (this)

Question

Haben Sie Probleme mit diesem. Ich habe eine Seite mit mehreren Produkten, Hemden, Hosen usw. Jedes Produkt kommt in den gleichen verschiedenen Farben: schwarz, blau, grün usw. Ich versuche, einige jQuery zu schreiben, die ich für alle Produkte verwenden kann. Grundsätzlich habe ich ein div, mit allen Produktbildern mit Klassen für jedes, zum Beispiel, das schwarze Produktbild ist class = "prodblack". Ich würde gerne die gleichen Klassen für alle Produkte verwenden. Aber die Art, wie ich dieses Setup jetzt habe, wenn ich auf das blaue Farbfeld für ein Produkt klicke, zeigen ALLE Produkte das blaue an, nicht nur das Produkt, auf das ich gerade klicke.

Hier ist ein Teil des HTML ist, ist dies nur ein div von vielen, aber sie sind alle die gleichen, gleichen Klassen, gleiche Farben usw.

<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> 

Und hier ist die JQuery eingerichtet, I mit $ (this) begann mit den blauen swatch messing, aber kann nicht scheinen, um es zu bekommen arbeiten:

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(); 
     }); 

    });  

Jede Hilfe wäre sehr dankbar, danke

Answer 1

Nevermind ich es endlich bekam, war ich mit das .parent falsch musste ich die .find-Methode zu diesem

 $('.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(); 
     }); 

hinzufügen

Answer 2

Ich verbrachte einige Zeit neulich eine Antwort auf diese Frage zu schreiben. Ich musste wegtreten und vergaß es. Als ich zurückkam, sah ich, dass du es herausgefunden hast. Davon abgesehen, take a look at this jsFiddle. Es reduziert die Anzahl der Klickereignisse auf nur einen.

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'); 

      } 
     }); 

    }); 

Es könnte ein bisschen mehr ausgearbeitet werden, aber vielleicht wird es hilfreich sein!