Question

基本上我将过滤/排序脚本与图库/缩略图脚本相结合。除了在单击新图像时更改元素的不透明度外，一切都很有效。即。点击新缩略图，渐变为1.0，旧版缩小为0.3。

我只能解决一个问题才能再发生一次。

例如：

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

我正在考虑使用计数器为单击的项添加一个类，然后如果应用该类，则该元素将淡出为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 - Thumbnails和Gallery以及MixitUp。

我知道会有不兼容性，但我已经把它全部与不透明性分开了。如此接近现在如此接近。

非常感谢任何帮助。如果需要，我可以提供更多信息。

我相信我所缺少的是正确的选择器。我只是在那个阶段，我无法摆脱阻碍我思考正确选择器的漏洞。我很近，但我想不出来。我知道它最终将成为一种简单的东西，我将自己写下这一切。 DOM让我感到沮丧。在遵循图库/缩略图代码的同时，尝试让父母和兄弟姐妹都正确无误。

干杯

编辑：

使用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");

此代码：

检查li选择器提取的#thumbs ul.thumbs li元素的是否有.counter类;
如果是这样，它会将所有 li元素淡化为0.3不透明度;
然后从.counter中移除this类，而不是具有.counter类的元素;
然后它会将.counter课程提交给this。

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

如果没有看到您的代码，我无法给出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");

用于hasClass或以前单击的元素的JQuery选择器

1 个答案: