Javascript 为非活动/活动状态切换图像类

我的js仍然面临阻力——我有一排缩略图。第一个类从一个活动类开始，其他类则从非活动类开始。单击时，我希望单击拇指切换到活动状态，并将上一个切换到非活动状态。我还希望非活动类具有悬停效果。现在，我可以添加活动类，但我不知道如何切换上一个活动类

jQuery(document).ready(function($) {
$(".groomsmen_thumbs, .bridesmaid_thumbs").click(function(){
if ( $(this).find(".toplevel").hasClass("inactivethumb") ) {
$('img', this).toggleClass("activethumb inactivethumb");

}
}),

$('.groomsmen_thumbs, .bridesmaid_thumbs')
.on("mouseenter", function() {
$(this).find(".inactivethumb.toplevel").animate({"opacity": "1"}, "fast");
})
.on("mouseleave", function() {
$(this).find(".inactivethumb.toplevel").animate({"opacity": "0"}, "fast");

})
});

链接看起来像这样

<li><a href="#" class="groomsmen_thumbs"><img src="images/groom_thumb1_0.jpg"/><img class="toplevel activethumb" src="images/groom_thumb1_1.jpg"/></a></li>

尝试使用jquery的active和prev：

js:

html:

<ul>
<li>
<img src="1.jpg" class="active"/>
<img src="2.jpg" class=""/>
</li>
</ul>

您使用的方法是同时添加inactivethumb和activethumb类。如果您正在使用（jqueryui），那么您需要类似（jqueryui）的东西。下面是常规jQuery的一种替代方法：

$(".groomsmen_thumbs, .bridesmaid_thumbs").click(function(){
var toplevel = $(this).find(".toplevel");
if(toplevel.hasClass("inactivethumb")
{
 toplevel.removeClass("inactivethumb").addClass("activethumb");
}
});

一个较短的备选方案，假设所有IMG都以

inactivethumb

类开始：

$(".groomsmen_thumbs, .bridesmaid_thumbs").click(function(){
    $(this).find(".toplevel").toggleClass("inactivethumb").toggleClass("activethumb");
    });

---

这将删除

非活动

类，并在

单击

时添加

活动类

。您的函数后还缺少一些分号。

$(".groomsmen_thumbs, .bridesmaid_thumbs").click(function(){
    $(this).find(".toplevel").toggleClass("inactivethumb").toggleClass("activethumb");
    });