1

基本上，我将过滤器/排序脚本与画廊/缩略图脚本相结合。除了在单击新图像时更改元素的不透明度之外，一切都运行良好。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了，但当然这适用于点击的项目。

我想选择应用了 counter 样式的元素，#thumbs ul.thumbs li .counter然后将该特定 itemsli元素淡化回0.3.

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

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

我正在考虑的另一个选项是尝试找到先前单击的项目并将不透明度应用于该列表项。

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

我知道会有不兼容的地方，但除了不透明度之外，我已经让这一切都起作用了。现在如此接近。

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

我相信我所缺少的只是正确的选择器。我只是在那个阶段，我无法让自己摆脱阻止我思考正确选择器的漏洞。我是如此接近，但我就是想不出来。我知道它最终会变得很简单，我会为写下所有这些而自责。DOM 让我很沮丧。在遵循画廊/缩略图代码的同时，试图让父母和兄弟姐妹都正确。

干杯

编辑：

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

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：如何检查两个元素是否具有相同的类

编辑：我最终通过删除淡入淡出并改用一个类来解决这个问题。虽然我不喜欢使用!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在当前选定的项目上保持不透明度。

比预期更好的结果。

4

1 回答 1

1

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

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

这段代码：

  1. 检查选择器拉出的任何li元素是否#thumbs ul.thumbs li具有.counter类；
  2. 如果是这样，它会将所有li元素淡化为 0.3 不透明度；
  3. 然后它从 中删除.counter类this，而不是具有.counter该类的元素；
  4. 然后它将.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");
于 2014-01-16T11:39:38.147 回答