Question

我想在jQuery中做一个照片库，为了做到这一点，我希望第一个缩略图的不透明度为1，所有其他缩略图为0.5，只要我的鼠标位于缩略图上方，就会出现不透明度一个将是1，当我的鼠标出来时，不透明度将回到0.5。所以我做了所有这些，问题是我不想要点击的缩略图的“mouseover”，“mouseout”代码，所以我做的是：

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

然后

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

$（ '拇指。 '）的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

Answer 1

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

Answer 2

selector != $(this)

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

$(this) != $(this)

也将始终评估为true。

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

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

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

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

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

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

jQuery，缩略图不透明度

4 个答案: