jQuery，缩略图不透明度答案

【问题标题】：jQuery, thumbnail opacityjQuery，缩略图不透明度
【发布时间】：2012-12-30 05:23:32
【问题描述】：

我想在 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

【问题讨论】：

selector != $(this) 将始终评估为真。尝试将类添加到拇指并以这种方式进行比较

标签： jquery opacity

【解决方案1】：

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

【讨论】：

【解决方案2】：

selector != $(this)

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

$(this) != $(this)

也将始终评估为true。

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

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

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

if ($(this).attr('class') !== classStr) {
    // elements are not the same
}

【讨论】：

【解决方案3】：

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

$('.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');
    }
});

【讨论】：

【解决方案4】：

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

【讨论】：