使用 jQuery 在选项卡之间切换，使用不透明度进行强调

Question

问题：

我正在为我的个人作品集网站创建一个图库页面。我需要它在顶部有多个链接，用于我的艺术的不同类别。登陆网站后，将选择“全部”选项，并且我的艺术的所有缩略图都将显示并且完全不透明。当点击链接时，只有属于链接对应类别的缩略图将保持 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：

$(文档).ready(函数() { var $holder = $('ul.ourHolder'); var $data = $holder.clone(); $('#filterOptions li a').click( 功能（e）{ // 重置所有按钮的活动类 $('#filterOptions li').removeClass('active'); // 分配被点击的过滤器选项的类 // 元素到我们的 $filterType 变量 var $filterType = $(this).attr('class'); $(this).parent().addClass('active'); if ($filterType == 'all') { // 将所有 li 项分配给 $filteredData var when // 单击“全部”过滤器选项 var $filteredData = $data.find('li'); $filteredData.animate({opacity: 1.0}, 500); } 别的 { var $filteredData = $data.find('li[data-type=' + $filterType + ']'); $filteredData.animate({opacity: 0.5}, 500); } }); });

非常感谢任何帮助，我需要启动我的新网站，而这段代码就是阻碍我前进的全部！

Answer 1

jsFiddle demo

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

    });
});