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

  显示原文与译文双语对照的内容

基本上我将过滤/排序脚本与库/缩略图脚本组合在一起。 当单击新图像时,除了更改元素的不透明度之外,所有内容都能很好地工作。 IE 。单击新缩略图,淡入 1.0,旧一个淡入 0.3 。

我可以解决一个问题,只有一个发生。

例如:

我可以使前面的元素退回 0.3不透明度,新元素将渐变到 1.0,但只通过选择整个列表: 这里操作非常有效。但是当过滤器启动并且只有个/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让我 frustrating 。 试图在库/缩略图代码之后得到所有的家长和兄弟姐妹。

cheers!

编辑:

使用 donnelly below的杰克方法,我可以解决我遇到的问题。 但是,缩略图仍被添加到列表中,即使它没有匹配的筛选器。 这个工作可以做,但我想让每次过滤器都不需要调用代码:


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

我已经过了这个 below,但是在现有代码中实现它时遇到了问题:

jQuery: 如何检查两个元素是否具有相同类型的to

编辑:我通过删除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;
}

这是非常简单且简单的,当使用筛选器时,类不会重置,在当前选定的项目中保持不透明度。

比预期更好的结果。

时间: 作者:

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


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. 如果是这样,那么它将淡出所有的元素,所有的元素都是 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");

作者:
...