过滤时隐藏嵌套元素答案

【问题标题】：Hide a nested element when filtered out过滤时隐藏嵌套元素
【发布时间】：2013-08-18 13:24:06
【问题描述】：

有一个带有类别的图库，还有一个带有过滤选项的菜单，可根据所选选项对图库中的图像进行排序。这是我用来进行过滤的代码：

(function(){
    var $portfoliogallerySection = $('#portfolio-gallerySection'),
        $filterbuttons = $('#portfolio-topSection a');

    $filterbuttons.on('click', function(){
         $filterbuttons.removeClass('portfolio-topSectionClicked');
         $(this).addClass('portfolio-topSectionClicked');
         $portfoliogallerySection.attr('class', $(this).data('filter'));
});}());

问题是：itemWrapper里面有一个a，如何从所有未选中的itemwrapper中隐藏这个a，并为过滤器中选择的所有itemwrapper保留它。强>

这是 HTML：

    <div class="wrapperB">
                    <div class="content">
                        <div id="portfolio-gallerySection" class="all">
                            <div class="grid"><!--Gird 1--> 

                                <div class="itemWrapper photography">
                                    <img alt="" src="assets/images/11.png">
                                    <a href="portfolio/webdesign/project.html"><p>Click To View Project</p></a>
                                </div>  

                                <div class="itemWrapper webDesign">
                                    <img alt="" src="assets/images/me.png">
                                    <a href="portfolio/webdesign/project.html"><p>Click To View Project</p></a>
                                </div>  

                                </div>                      
                            </div>      
                        </div>
                    </div>

**The CSS:**

/*Portoflio Gallery Section*/
#portfolio-gallerySection .grid {
    display: inline-block;
    vertical-align: top;
    width: 33.05%;  
}

.itemWrapper {
    position: relative;
    overflow: hidden;
    margin: 2px 1px;
}

.itemWrapper a {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    background: url(../elements/magnifying-glass.png) center center no-repeat rgba(69,96,135,.85);
    cursor: pointer;

    opacity: 0;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    filter:alpha(opacity=0);

    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -ms-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}

.itemWrapper:hover a {
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter:alpha(opacity=100);
}

.itemWrapper a p{
    color: #FFFFFF;
    position: absolute; bottom: 15px; right: 20px;
    cursor: pointer;
}

/*Filter Options*/
.itemWrapper{
     opacity: 0.5;
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    filter:alpha(opacity=50);   
}

.all .itemWrapper,
.visualIdentity .itemWrapper.visualIdentity,
.photography .itemWrapper.photography,
.webDesign .itemWrapper.webDesign{
   opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter:alpha(opacity=100); 
}

【问题讨论】：

标签： javascript jquery css image filter

【解决方案1】：

将selected 类添加到您的.itemWrapper div 中

JS

(function(){
    var $portfoliogallerySection = $('#portfolio-gallerySection'),
        $filterbuttons = $('#portfolio-topSection a');

    $filterbuttons.on('click', function(){
        var filter = $(this).data('filter');

        $filterbuttons.removeClass('portfolio-topSectionClicked');
        $(this).addClass('portfolio-topSectionClicked');
        $portfoliogallerySection.attr('class', filter);
        $('.itemWrapper').removeClass('selected');
        $('.itemWrapper.' + filter).addClass('selected');
    });
}());

CSS

.itemWrapper a{
    display: none;
}

.all .itemWrapper a,
.itemWrapper.selected a {
    display: block;
}

演示

http://jsbin.com/afaNunI

【讨论】：

【解决方案2】：

我猜你可以用 CSS 做到这一点：

/* hide all a's inside an itemWrapper */
.itemWrapper a {
    display: none;
}
/* show all a's inside an itemWrapper with class .portfolio-topSectionClicked */
.itemWrapper.portfolio-topSectionClicked a {
    display: block;
}

【讨论】：