Javascript 通过将类名从一个元素传递到下一个元素，在单击鼠标时更改图像

当我点击鼠标时，我想改变背景图像。我想从一个

元素

中删除

类

，并将相同的

类

添加到下一个

元素

。然后基于特定的

类

名称，我想使用

jquery

执行

fadeIn

和

fadeOut

。但是，当我使用

类

时，仅更改第一个图像。当我点击第二张图片时，它不会改变。但是当我用

div

替换

class

时，每次单击都会改变背景图像，直到到达最后一张图像。谁能帮我理解我错过了什么。多谢各位

$（函数（）{
$（“div”）.not（“.active”）.hide（）；
$（“.active”）。单击（function（）{//当我将.active更改为div时，它会工作。
$（this）.fadeOut（函数（）{
$（此）.removeClass（“活动”）；
$（this.next（）.addClass（“active”）；
$（this.next（）.fadeIn（））
})
})
})

body，html{
身高：100%；
宽度：100%；
背景颜色：黄色；
}
#一个{
背景：url（“../Images/one.jpg”）固定中心不重复；
宽度：100%；
身高：100%；
}
#两个{
背景：url（“../Images/two.jpg”）；
宽度：100%；
身高：100%；
}
#三{
背景：url（“../Images/three.jpg”）；
宽度：100%；
身高：100%；
}

您需要使用

on（）

而不是

click（）

，因为您正在动态添加类

$(function(){
    $("div").not(".active").hide();
    $("body").on('click', '.active', function(){ //When I change .active to div, it works. 
        $(this).fadeOut(function(){
            $(this).removeClass("active");
                $(this).next().addClass("active");
            $(this).next().fadeIn()
        })
    })
})

---

也许您需要使用

.delegate

按如下方式更改代码：

   $('body').delegate('.active', 'click', function() {
        $(this).fadeOut(function() {
            $(this).removeClass("active");
            $(this).next().addClass("active");
            $(this).next().fadeIn()
        })
    })

或者您更改绑定

单击
主体上的
来判断
e.target

请参见此处的详细信息
您可以这样做：

   $('body').delegate('.active', 'click', function() {
        $(this).fadeOut(function() {
            $(this).removeClass("active");
            $(this).next().addClass("active");
            $(this).next().fadeIn()
        })
    })


首先将特定类
.bg div
添加到这些div，因为使用此
$（“div”）
定位所有div非常通用，它将隐藏除活动div之外的所有内容，以防您有其他div，它们将被隐藏

隐藏类为
.bg div
的所有div，但具有
.active
的div除外

单击事件时，您仍然可以将
bg div
div作为目标，因为只有一个具有
.active
类，因为所有其他
bgdiv
都已从上一步隐藏<代码>淡出（）

将计数器
索引增加一

现在，如果
index
的值等于
bgDivs
的长度-数量，则将coutner重置为
0，这用于显示最后一个
bg div
时
fadeIn（）
下一个div



$（函数（）{
变量bgDivs=$（“.bg div”），
指数=0；
bgDivs.not（“.active”）.hide（）；
bgDivs.on（'click'，function（））{
$（this.fadeOut（'fast'）；
指数+=1；
//如果计数器值小于BGDIV的数量，请保留此值
//否则，将其设置为0并重新开始，因为我们在最后一个div上
索引=（索引

body，
html{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
背景颜色：黄色；
}
.bg分区{
宽度：100%；
身高：100%；
}
#一个{
背景：url（“//dummyimage.com/1000x700？text=one”）固定中心不重复；
背景尺寸：封面；
}
#两个{
背景：url（“//dummyimage.com/1000x700？text=two”）固定中心不重复；
背景尺寸：封面；
}
#三{
背景：url（“//dummyimage.com/1000x700？text=3”）固定中心不重复；
背景尺寸：封面；
}