0

問題：

個人のポートフォリオ サイトのギャラリー ページを作成しています。私のアートのさまざまなカテゴリに対して、上部に複数のリンクが必要です。サイトにアクセスすると、「すべて」オプションが選択され、私のアートのすべてのサムネイルが表示され、完全に不透明になります。リンクをクリックすると、リンクに対応するカテゴリに属する​​サムネイルのみが 100% の不透明度のままになり、その他のサムネイルは 50% に暗くなります。

ほぼ正しいと思うコードがありますが、それでも何もしません。以下は私が取り組んでいるコードです。

(省略された) HTML:

<ul id="filterOptions">
<li class="active"><a href="#" class="all">All</a></li>
<li><a href="#" class="ty">Typography</a></li>
<li><a href="#" class="pr">Print</a></li>
</ul>

<ul class="ourHolder">
<li data-type="ty"><a href="img.jpg"><img src="img.png"/></a></li>
<li data-type="il"><a href="img.jpg"><img src="img.png"/></a></li>
<li data-type="pr"><a href="img.jpg"><img src="img.png"/></a></li>

CSS:

$(document).ready(function() {

  var $holder = $('ul.ourHolder');

  var $data = $holder.clone();

    $('#filterOptions li a').click(
    関数(e) {
        // すべてのボタンのアクティブなクラスをリセットします
        $('#filterOptions li').removeClass('active');

        // クリックされたフィルター オプションのクラスを割り当てます
        // $filterType 変数への要素
        var $filterType = $(this).attr('クラス');
        $(this).parent().addClass('active');

        if ($filterType == 'all') {
            // 次の場合、すべての li アイテムを $filteredData 変数に割り当てます
            // 「すべて」フィルター オプションがクリックされた
            var $filteredData = $data.find('li');
            $filteredData.animate({不透明度: 1.0}, 500);
        }
        そうしないと {
             var $filteredData = $data.find('li[data-type=' + $filterType + ']');
             $filteredData.animate({不透明度: 0.5}, 500);
        }

    });
});

新しいサイトを立ち上げる必要があり、このコードのビットだけが私の足を引っ張っています!

4

1 に答える 1

0

jsFiddle デモ

HTML

<ul id="filterOptions">
    <li class="active"><a href="#" data-type="all">All</a>

    </li>
    <li><a href="#" data-type="ty">Typography</a>

    </li>
    <li><a href="#" data-type="pr">Print</a>

    </li>
</ul>
<ul class="ourHolder">
    <li class="ty"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="il"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="pr"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="ty"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="il"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="pr"><a href="img.jpg"><img src="img.png"/></a>

    </li>
</ul>

jQuery

$(document).ready(function () {
    var $holder = $('ul.ourHolder');
    var $data = $holder.clone();
    var holders = $('.ourHolder li');
    $('#filterOptions li a').click(
    function (e) {
        // reset the active class on all the buttons
        $('#filterOptions li').removeClass('active');
        // assign the class of the clicked filter option
        // element to our $filterType variable
        var $filterType = $(this).data('type');
        var noOpac = $(this).data('type');
        $(this).parent().addClass('active');
        if ($filterType == 'all') {
            // assign all li items to the $filteredData var when
            // the 'All' filter option is clicked
            var $filteredData = $data.find('li');
            $filteredData.animate({
                opacity: 1.0
            }, 500);
            $('.ourHolder li').animate({
                opacity: 1.0
            }, 0);
        } else {
            $('.ourHolder li').animate({
                opacity: 0.5
            }, 250);
            $.each(holders, function (i, v) {
                if ($(this).hasClass(noOpac)) {
                    $(this).animate({
                        opacity: 1.0
                    }, 0);
                }
            });
        }

    });
});
于 2013-07-07T01:40:55.073 に答える