Question

我正在制作一个衬衫画廊，只有一个选择按钮我只能展示具有特定颜色的衬衫（如果用户选择绿色，我只展示其中带有绿色的衬衫）。

<div id="fancybox-thumbs">
    <ul>
        <li class="shirt" color="green"><a class="fancybox-buttons" data-fancybox-group="button" href="images/Slike/Majice/VEM/Logo/DSC_0126-logo.jpg"><img src="images/Slike/Majice/VEM/Logo/DSC_0126-thumb.jpg" alt="" /></a></li>

        <li class="shirt" color="blue"><a class="fancybox-buttons" data-fancybox-group="button" href="images/Slike/Majice/VEM/Logo/DSC_0128-logo.jpg"><img src="images/Slike/Majice/VEM/Logo/DSC_0128-thumb.jpg" alt="" /></a></li>

        <li class="shirt" color="yellow"><a class="fancybox-buttons" data-fancybox-group="button" href="images/Slike/Majice/VEM/Logo/DSC_0130-logo.jpg"><img src="images/Slike/Majice/VEM/Logo/DSC_0130-thumb.jpg" alt="" /></a></li>

    </ul></div>

我的问题是，我是否可以设置其中一个“li”的颜色标签，让我们说绿色和蓝色，如果从选择按钮中选择绿色或蓝色，则显示它？

这是jQuery代码：

$('document').ready(function() {

    $('#colorForm').change(function() {

        var selectedColor = $('#colorForm option:selected').val();

        if( selectedColor == 'all' ) {
            $('li.shirt').show(1000);
        } else {
            $('li.shirt[color*="'+selectedColor+'"]').show(1000);
            $('li.shirt[color!="'+selectedColor+'"]').hide(1000);
        }

    });

});

感谢您的帮助！

Answer 1

绝对。你只需要一点聪明。

你的元素是这样的：

<li class="shirt" color="green blue"> ... </li>

然后，将您的jQuery更改为：

$('li.shirt').hide(1000);
$('li.shirt[color~=green]').stop().show(1000);

~=属性选择器有点像类的工作方式。你有几个单词，用空格分隔，~=查找一个这样的单词。

Answer 2

数据属性似乎更合适（也更有效）

<li class="shirt" data-color="green">

然后

$(document).ready(function () {
    $('#colorForm').on('change', function () {
        var selectedColor = this.value;

        if (selectedColor == 'all') {
            $('li.shirt').show(1000);
        } else {
            $('li.shirt').each(function(_,li) {
                var flag = $.inArray(selectedColor, $(li).data('color').split(/\s+/)) != -1;
                $(li)[flag ? 'show':'hide'](1000);
            });
        }
    }).trigger('change');
});

FIDDLE

多个属性选项

2 个答案: