Javascript 多属性选项

我正在制作一个衬衫库，通过选择按钮，我只能显示具有特定颜色的衬衫（如果用户选择绿色，我只显示其中包含绿色的衬衫）

---

谢谢你的帮助

当然。你只需要一点聪明

让您的元素如下所示：

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

---

属性选择器有点像类的工作方式。您有几个单词，用空格分隔，并且

~=

查找一个这样的单词。

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

让您的元素如下所示：

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

---

属性选择器有点像类的工作方式。您有几个单词，用空格分隔，并且

~=

查找一个这样的单词。

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

---

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

---

感谢您的评论。我是jQuery的新手，我不确定您所说的选择器是如何构建的。你能帮我一下吗？现在你有了

selectedColor

变量。只需将其拼接到硬编码的位置即可。类似于

$（“li.shirt[color~=”+selectedColor+“]）的东西应该可以做到这一点。感谢您的评论。我是jQuery的新手，我不确定您所说的选择器是如何构建的。你能帮我一下吗？现在你有了
selectedColor
变量。只需将其拼接到硬编码的位置即可。类似于
$（“li.shirt[color~=”+selectedColor+“]）的东西应该可以做到这一点。非常感谢您，先生。你能简单地解释一下“else”语句中的代码是做什么的吗？它迭代LI元素，检查数据属性中是否存在select的值，并相应地显示或隐藏。哦，好的，非常好。这可能是一个有点牵强的问题，但是如何更改fancybox代码，使其仅滚动选定的颜色？因为现在当我点击图片放大时，它仍然会滚动浏览所有图片，而不仅仅是我选择的颜色。谢谢你工作得很好。非常感谢您，先生。你能简单地解释一下“else”语句中的代码是做什么的吗？它迭代LI元素，检查数据属性中是否存在select的值，并相应地显示或隐藏。哦，好的，非常好。这可能是一个有点牵强的问题，但是如何更改fancybox代码，使其仅滚动选定的颜色？因为现在当我点击图片放大时，它仍然会滚动浏览所有图片，而不仅仅是我选择的颜色。谢谢
<li class="shirt" color="green blue"> ... </li>

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

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