jQuery :contains 选择器不适用于 jQueryUI 滑块答案

【问题标题】：jQuery :contains selector does not work with jQueryUI sliderjQuery :contains 选择器不适用于 jQueryUI 滑块
【发布时间】：2012-01-23 15:15:40
【问题描述】：

我有以下代码。

<ul>
    <li class="prod" data-channels="3 4 6 8">product 1</li>
    <li class="prod" data-channels="1">product 2</li>
    <li class="prod" data-channels="2 8">product 3</li>
    <li class="prod" data-channels="3 8">product 4</li>
    <li class="prod" data-channels="3">product 5</li>
    <li class="prod" data-channels="6">product 6</li>
</ul>

$("#slider").slider({
    value: 0,
    min: 0,
    max: 24,  
    step: 1,
    slide: function (event, ui) {
        $("#amount").val(ui.value);
        var filter = ui.value;

        if (filter) {
            $('li.prod').each(function (index) {
                var channels = $(this).data('channels');
                if (channels == filter) {
                    $(this).fadeTo("fast", 1);
                } 
                else {
                    $(this).fadeTo("fast", 0.3);
                }
            });
        }
    }
});
$("#amount").val($("#slider").slider("value"));

我想要做的是将它发送给fadeto 数据channels 标签中包含某些值的产品。当数据通道具有单个值时，它可以正常工作。但现在客户希望它有多个值，如下所示。

所以我不能使用 == 运算符我需要做某种包含运算符，如下所示，但我碰上了砖墙。

var channels = $(this).data('channels');
if ($("li.prod:contains('"+channels+"')")) {
    $(this).fadeTo("fast", 1);
} 
else {
    $(this).fadeTo("fast", 0.3);
}

但它不能正常工作。这是一个包含我的代码的 jsfiddle：http://jsfiddle.net/isimpledesign/CmJXm/3/

【问题讨论】：

您确实意识到:contains 作用于元素的内容，而不是data-* 属性？

标签： jquery jquery-ui user-interface filter contains

【解决方案1】：

为什么不直接将 channels 字符串 var 拆分为单个值（分隔符是 space）并测试每个值？

【讨论】：

非常感谢您刚刚查看此帖子以获得答案并且您的工作完美;)

【解决方案2】：

如果我理解您的要求，您可以使用“属性词选择器”来完成。

像这样：

$("li.prod[data-channels~='"+channel+"'").each(function (index) {
    $(this).fadeTo("fast", 1);
});

换句话说，从您的示例中选择索引 0、2、3：

$("li.prod[data-channels~='8'")

如果您想将其余频道淡化为.3，我会标记匹配的频道，然后选择所有没有标记的频道。像这样：

更新

因此，对于您的确切问题，要在其数据通道包含滑块的当前值时显示/隐藏，请将其绑定到其幻灯片事件：

function (event, ui) {
    ...
    // reset marker        
    $("li.prod").attr("data-active", "false");

    // show channels
    $("li.prod[data-channels~='"+ui.value+"'").each(function (index) {
        $(this).fadeTo("fast", 1);
        $(this).attr("data-active", "true"); // mark them
    });

    // hide rest
    $("li.prod[data-active!='true'").each(function (index) {
        $(this).fadeTo("fast", .3);
    });
}

更新 (x2)

感谢@YiJiang 的反馈，我们不必做所有这些标记的事情。只需使用siblings 选择器链接您要隐藏的频道。像这样：

function (event, ui) {
    ...

    // show target channels
    $("li.prod[data-channels~='"+ui.value+"'").fadeTo("fast", 1)
        .siblings().fadeTo("fast", .3);

}

【讨论】：

嗨 Deeno 试图让它在这里工作是我试图实现的一个更好的例子 jsfiddle.net/isimpledesign/CmJXm/8
这个例子真的很令人困惑。我仍然不确定你在问什么。你能再简化一点吗？好像里面有几步。
嗨 deeno 是的，抱歉很难举例，如果你拿这个例子 jsfiddle.net/isimpledesign/CmJXm/1 你可以看到它们淡入到带有 data-channel = 到滑块通道的列表中，所以在第一个 li 元素上有 3 4 6 8 我希望它在所有这些值上都为 fadeTo 1。谢谢
我想我明白了。更新了我的答案。
为什么不直接使用$("li.prod[data-channels~='"+ui.value+"'").fadeTo("fast", 1).siblings().fadeTo("fast", .3);？

【解决方案3】：

split() 和indexOf() 可以解决您的问题。更改原始代码的以下行：

if (channels == filter) {

收件人：

if (channels.toString().split( ' ' ).indexOf( filter.toString() ) > -1 ) {

演示：http://jsfiddle.net/ThinkingStiff/QSYz8/

【讨论】：