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

toggling image classes for inactive/active states

本文关键字：图像 活动状态 非活动      更新时间：2023-09-26

我的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:

$(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>

使用toggleClass的方式是添加inactivethumb和activethumb类。如果您正在使用switchClass（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");
    });

这将删除inactive类，并在click上添加activeclass。

相关文章：