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

Question

我仍然对抗这里与我的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> 

Answer 1

尝试使用jQuery的活跃和prev：

JS：

$(document).ready(function(){ 
var active = $(".active"); 
var next = active.next('img'); 
active.click(function(){ 
    active.removeAttr('class'); 
    next.addClass('active'); 
    }); 
}) 

HTML：

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

Answer 2

您使用toggleClass的方式是添加inactivethumb和activethumb类。如果你使用的是你想要的东西如switchClass（jQuery UI）。这是与普通jQuery的一种替代方案：

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

较短的替代，假设所有IMGS与inactivethumb类开始：

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

这将删除inactive类和click添加activeclass。