切換圖像類爲非活動/活動狀態

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。