Question

遇到这个问题。我有一个包含多种产品，衬衫，裤子等的页面。每个产品都有相同的颜色：黑色，蓝色，绿色等。我正在尝试编写一些我可以用于所有产品的jQuery。基本上，我有一个div，所有产品图像都有每个类的类，例如，黑色产品图像是class =＆＃34; prodblack＆＃34;。我想对所有产品使用相同的类。但是，如果我点击产品的蓝色样本，我现在就有这种设置的方式所有产品都显示蓝色产品，而不仅仅是我目前点击的产品。

以下是HTML的一部分，这只是众多中的一个，但它们都设置相同，相同的类，相同的颜色等。

<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，我开始使用$（this）搞乱蓝色样本，但似乎无法使其正常工作：

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

没关系我终于明白了，我使用.parent错误我必须将.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。它将点击事件的数量减少到只有一个。

npm install -g npm@3.10.10

它可能会更加充实，但也许它会有所帮助！

Jquery隐藏父Div中的类使用（this）

2 个答案: