0

カテゴリを含むギャラリーがあり、選択したオプションに応じてギャラリー内の画像を並べ替えるためのフィルタリング オプションを含むメニューがあります。フィルタリングを機能させるために使用しているコードは次のとおりです。

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

2 に答える 2

0

divにselectedクラスを追加する.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

于 2013-08-18T14:30:48.820 に答える