0

我想在 jQuery 中做一个照片库，为此我想要 1 中的第一个缩略图的不透明度，以及 0.5 中的所有其他缩略图，一旦我的鼠标在缩略图上方，这个的不透明度就会为 1，当我的鼠标退出时，不透明度将恢复为 0.5。所以我做了所有这些，问题是我不想要我点击的缩略图的这个“mouseover”，“mouseout”代码，所以我所做的是：

var selector = $('.thumb:first');

然后

 $('.thumb').click(function() {
    selector = $(this);
  $(this).css('opacity','1');

$('.thumb').css('不透明度','0.5'); });

和

$('.thumb').mouseover(function() {
    if($(this) != selector){
    $(this).css('opacity','1');
    }
});

$('.thumb').mouseout(function() {
    if($(this) != selector){
    $(this).css('opacity','0.5');
    }
});

但它不起作用，只要我的鼠标离开我点击的最后一个缩略图，缩略图的不透明度就会变为 0.5 而不是保持在 1

4

4 回答 4

1

听起来 CSS 可以为您处理！查看first-child或first-of-type伪选择器。通过将这样的表示逻辑从您的 JS 中移到 CSS 中，您将在未来帮助您自己和您的其他开发人员。

于 2012-12-29T21:04:55.783 回答
1

selector != $(this)

将始终评估为true，因为它们是使用new关键字创建的单独对象实例。所以，同样地，

$(this) != $(this)

也将始终评估true为 。

尝试将类添加到拇指并以这种方式进行比较。

var classStr = $('.thumb:first').attr('class');

然后在您的事件处理程序中：

if ($(this).attr('class') !== classStr) {
    // elements are not the same
}
于 2012-12-29T21:09:48.093 回答
0

您可以向单击的拇指添加一个类，并检查拇指是否在鼠标悬停事件上具有该类。

$('.thumb').click(function() {
    $(this).addClass('clicked');
    $(this).css('opacity','1');
});

$('.thumb').mouseover(function() {
    if (!$(this).hasClass("clicked")) {
        $(this).css('opacity','1');
    }
});

$('.thumb').mouseout(function() {
    if (!$(this).hasClass("clicked")) {
        $(this).css('opacity','0.5');
    }
});
于 2012-12-29T21:09:58.670 回答
-1

JS：

$('.thumb:first').addClass("selected");

$('.thumb').click(function() {
  $('.thumb.selected').removeClass("selected");
  $(this).addClass("selected");
});

CSS：

.thumb { opacity: 0.5; }
.thumb:hover { opacity: 1; }
.thumb.selected { opacity: 1; }
.thumb.selected:hover { opacity: 1; }

​ ​</p>

于 2012-12-29T21:23:32.447 回答