Question

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

(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中有一个内容，如何隐藏未选中的所有itemwrappers中的a，并保留所有从过滤器中选择的itemwrappers。

以下是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); 
}

Answer 1

我猜你可以用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;
}

Answer 2

在selected divs

中添加.itemWrapper课程

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 个答案:

JS

CSS

演示