Jquery親Divのクラスを非表示にする（this）

Question

これにはいくつか問題があります。私は、複数の製品、シャツ、パンツなどのページを持っています。すべての製品は、同じ色（黒、青、緑など）で表示されます。私はすべての製品に使用できるjQueryを作成しようとしています。基本的には、私はdivを持っています。すべての商品画像にはそれぞれのクラスがあります。たとえば、黒の商品画像はclass = "prodblack"です。私はすべての製品に同じクラスを使用したいと思います。しかし、製品の青いスウォッチをクリックすると、現在この設定が行われています。すべての製品は、現在クリックしている製品だけでなく、青いものも表示します。ここで

はHTMLの一部であり、私は、これは多くのうち一つだけdiv要素であるが、それらはすべて同じ、同じクラス、同じ色など

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

を設定されており、ここではjQueryのです私が使っていた、

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

    });  

任意の助けをいただければ幸いです、私はついにそれを得たあなたの

Answer 1

ネヴァーマインドに感謝：$（this）を使用して青色の見本をいじり始めたが、それは働いて得るように見えることはできませんその.parent wrongこれに.findメソッドを追加する必要がありました。

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

先日、この質問に対する回答を書いていました。私は踏み出してそれを忘れていた。私が帰ってきたとき、あなたがそれを理解したのを見ました。それは、take a look at this jsFiddleと言われています。クリックイベントの数を1つに減らすことができます。

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

      } 
     }); 

    }); 

もう少し詳しく解説されていますが、参考になるかもしれません。