Question

我仍然在这里遇到我的js阻力 - 我有一排缩略图。第一个以活动类开始，其他类具有非活动类。点击后，我想点击拇指切换到活动状态，而前一个切换到非活动状态。我还想要一个非活动类的悬停效果。现在，我可以添加活动类，但我无法弄清楚如何切换prev活动类

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的active和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课程并在activeclass上添加click。

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

2 个答案: