hasClass 或先前单击的元素的 JQuery 选择器

Question

基本上，我将过滤/排序脚本与图库/缩略图脚本结合在一起。除了在单击新图像时更改元素的不透明度外，一切都很好。 IE。单击新缩略图，淡化为 1.0，旧缩略图淡化为 0.3。

我可以解决一个问题，但又会发生另一个问题。

例如:

我可以让前一个元素淡入 0.3 不透明度，让新元素淡入 1.0，但只能通过使用以下命令选择整个列表:#thumbs ul.thumbs li。这非常有效，但是当过滤器启动并且您只显示 3/9 的列表项时，当您单击另一个缩略图时，所有内容都会淡化回 0.3，从而导致所有缩略图重新出现。

我正在考虑使用计数器向单击的元素添加一个类，然后如果应用该类，该元素将淡化回 0.3，然后删除该类。像这样。

$("#thumbs ul.thumbs li").click( function()
{
    if($("#thumbs ul.thumbs li").hasClass("counter")) {
        $("#thumbs ul.thumbs li").fadeTo('fast', 0.3);
        $(this).removeClass("counter");
    }
    $(this).addClass("counter");
    $(this).fadeTo('fast', 1.0);
});

我很清楚我的问题出在哪里。尝试将列表淡化回 0.3。我想不出要使用的选择器会选择一个有计数器的类，然后将其淡出。我尝试了 this 但这当然适用于点击的元素。

我想选择应用了计数器样式的元素 #thumbs ul.thumbs li .counter 然后将特定元素 li 元素淡化回 0.3。

必须这样做的原因是图库/缩略图脚本强制元素 li 不透明。现在我试图通过自己的方式找到它，但我找不到，所以我想写一个脚本来覆盖它。

正如我上面提到的，我在不考虑过滤器的情况下让它工作。

我想到的另一个选择是尝试找到之前单击的元素并将不透明度应用于该列表元素。

我正在使用 Galleriffic 示例 2 - 缩略图和图库以及 MixitUp。

我知道会有不兼容性，但除了不透明之外，我已经让一切正常工作。现在如此如此如此如此接近。

如有任何帮助，我们将不胜感激。如果需要，我可以提供更多信息。

我相信我所缺少的只是正确的选择器。我正处于无法让自己摆脱阻碍我思考正确选择器的困境的阶段。我是如此接近，但我就是想不起来。我知道它最终会变得简单，我会因为写下所有这些而自责。 DOM 让我很沮丧。在遵循画廊/缩略图代码的同时，试图让 parent 和 sibling 都正确。

干杯

编辑:

使用下面 Jack Donnelly 的方法，我能够解决我面临的问题。但是，即使没有匹配的过滤器，缩略图仍会添加到列表中。这行得通，但我想这样做，这样我就不必每次都为每个过滤器调用代码:

if ($("#filter-controls li.web").hasClass("filter-selected")){
    if ($(this).hasClass("web")){
        // Select our `li` element with the `.counter` class
        var $counter = $("#thumbs ul.thumbs li.counter");
        // Check whether this element exists
        if ($counter.length > 0) {
            // If it does exist, make it fade out
            $counter.fadeTo('fast', 0.3);
            // Finally, remove the counter class from our counter element
            $counter.removeClass("counter");
        }
        $(this).addClass("counter");
        $(this).fadeTo('fast', 1.0);
    }
}

我在下面遇到过这个问题，但在使用我现有的代码实现它时遇到了问题:

jQuery: How to check if two elements have the same class

编辑:我最终通过删除 fadeto 并使用一个类来解决这个问题。虽然我不喜欢使用 !important，但在这种情况下，这确实是唯一不会让人头疼的方法。

$("#thumbs ul.thumbs li").click( function()
{
    var $counter = $("#thumbs ul.thumbs li.counter");
    // Check whether this element exists
    if ($counter.length > 0) {
        $counter.removeClass("counter");
    }
    $(this).addClass("counter");
});

CSS 有这个:

.counter {
    opacity: 1.0 !important;
}

这很好也很简单，并且在使用过滤器时不会重置类，将当前所选元素的不透明度保持在 1.0。

比预期更好的结果。

Answer 1

这部分代码是您的问题所在:

if($("#thumbs ul.thumbs li").hasClass("counter")) {
    $("#thumbs ul.thumbs li").fadeTo('fast', 0.3);
    $(this).removeClass("counter");
}
$(this).addClass("counter");

这段代码:

1. 检查由 #thumbs ul.thumbs li 选择器提取的任何 li 元素是否有 .counter类；
2. 如果是这样，它会将 所有 li 元素淡化为 0.3 不透明度；
3. 然后从 this 中删除 .counter 类，而不是从具有 .counter 类的元素中删除；
4. 然后将 .counter 类返回给 this。

if 语句中的 this 指的是被点击的 li 元素； 不是具有.counter 选择器的li 元素。

如果没有看到您的代码，我无法给出 100% 准确的答案，但我可以猜测这就是您需要的:

// Select any li element with the counter class
var $counter = $("#thumbs ul.thumbs li.counter");

// Check whether any $counter elements exist
if ($counter.length > 0) {
    // If they does exist, make them fade out
    $counter.fadeTo('fast', 0.3);

    // Finally, remove the counter class from them
    $counter.removeClass("counter");
}

// Add the counter class to the li element which was clicked on
$(this).addClass("counter");