基于jquery中css属性的条件更改（if/then）

我有几张照片：

<img class="photo" src="{{ img.url_small }} />
<img class="photo" src="{{ img.url_small }} />
<img class="photo" src="{{ img.url_small }} />

（每个图像周围都有一个白色边距，因此背景的变化会改变边框）

问题是，当用户单击图像时，图像变为蓝色，但当鼠标从图像上移开时，边框变为白色

我尝试了一些条件：

$(".photo").mouseenter(function() {
   if($(this).css("background") != "blue") {
      $(this).css({"background":"green"});
   }
}).mouseleave(function() {
   if($(this).css("background") != "blue") {
      $(this).css({"background":"white"});
   }
});

---

但边界仍然从蓝色变为白色。我怎样才能使边界保持蓝色？有更有效的方法吗？

。鼠标悬停是更有效的方法

您真正需要做的是在单击图像时向其添加新类，如下所示：

$(".photo").click(function() {
   $(".photo").removeClass('currentImage');
   $(this).addClass('currentImage');
});

$(".photo").hover(function() {
     jQuery(this).addClass('hoverImage');
}, function() {
     jQuery(this).removeClass('hoverImage');
});

确保currentImage的样式符合您的要求：

.currentImage {
background:blue;
}
.hoverImage {
background:green;
}

---

.鼠标悬停是更有效的鼠标移动方式

您真正需要做的是在单击图像时向其添加新类，如下所示：

$(".photo").click(function() {
   $(".photo").removeClass('currentImage');
   $(this).addClass('currentImage');
});

$(".photo").hover(function() {
     jQuery(this).addClass('hoverImage');
}, function() {
     jQuery(this).removeClass('hoverImage');
});

确保currentImage的样式符合您的要求：

.currentImage {
background:blue;
}
.hoverImage {
background:green;
}

---

不要在CSS中使用javascript

CSS将处理简单的

悬停

样式更改，然后为

单击

添加一个类

如果您需要为悬停支持IE6，我会将

包装在

jQuery

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

不要在CSS中使用javascript

CSS将处理简单的
悬停
样式更改，然后为
单击
添加一个类

如果您需要为悬停支持IE6，我会将
包装在

jQuery

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

尝试在单击图像时从图像中删除鼠标事件处理程序。尝试在单击图像时从图像中删除鼠标事件处理程序。这非常有效。这是一个更好的实现。我也不知道你可以给同一个元素分配两个类。有一个问题，为什么我们需要“jQuery”部分而不是“$（this）”？我使用jQuery是出于某种原因。我真的不知道为什么。我想这是因为在某个时候，我有一个同样使用$的库，我很懒，但它仍然存在：（还有，是的，你可以有你想要的任意多的类。把类想象成元素的标记。这让处理DOM变得非常简单。效果非常好。这是一个更好的实现。我也不知道你可以给同一个元素分配两个类。一个问题，为什么我们需要“jQuery”部分而不仅仅是“$（这个）”？我之所以使用jQuery是有原因的。我真的不知道为什么。我想这是因为在某个时候我有一个库也使用了$，而且我很懒，但它仍然存在：（另外，是的，你可以有你想要的任意多个类。把类想象成元素的标记。它使处理DOM变得非常简单。