如何解决JQuery点击事件中元素类重复的问题？

现有两个位置重叠但z-index不同的div，配套CSS类如下：

.gif_left {
z-index: 20;
position: absolute;
margin-top: 130px;
opacity: 1;
}
.gif_right {
z-index: 19;
position: absolute;
margin-top: 80px;
opacity: 0;
}
.click {
opacity: 0;
visibility: hidden;
}
.click2 {
opacity: 1;
visibility: visible;
}

对应的jQuery代码：

$(document).ready(function() {
$('.gif_left').click (function() {
$('.gif_left').toggleClass('click');
$('.gif_right').toggleClass('click2');
});

$('.gif_right').click (function () {
$('.gif_left').toggleClass('click2');
$('.gif_right').toggleClass('click');
}); 
});

当前问题：点击.gif_left时功能正常，但点击.gif_right时，两个div会同时拥有click和click2类，导致二者同时显示，再次点击时类状态异常。

解决方案 #

问题根源在于toggleClass是切换类的存在状态，而非替换类。当点击.gif_right时，.gif_left可能已存在click类，此时执行toggleClass('click2')会新增click2类，导致两个类同时存在；同理.gif_right也会同时保留click和click2，引发样式冲突。

可以通过明确控制类的添加与移除，确保每个元素只保留所需类：

修改后的jQuery代码：

$(document).ready(function() {
    $('.gif_left').click(function() {
        // 给.gif_left添加click类，移除click2类
        $('.gif_left').addClass('click').removeClass('click2');
        // 给.gif_right添加click2类，移除click类
        $('.gif_right').addClass('click2').removeClass('click');
    });

    $('.gif_right').click(function() {
        // 给.gif_right添加click类，移除click2类
        $('.gif_right').addClass('click').removeClass('click2');
        // 给.gif_left添加click2类，移除click类
        $('.gif_left').addClass('click2').removeClass('click');
    }); 
});

或者使用toggleClass同时处理两个互斥类，实现类的切换替换：

$(document).ready(function() {
    $('.gif_left').click(function() {
        // 切换.gif_left的click/click2类（只保留一个）
        $('.gif_left').toggleClass('click click2');
        // 切换.gif_right的click2/click类（只保留一个）
        $('.gif_right').toggleClass('click2 click');
    });

    $('.gif_right').click(function() {
        // 切换.gif_right的click/click2类（只保留一个）
        $('.gif_right').toggleClass('click click2');
        // 切换.gif_left的click2/click类（只保留一个）
        $('.gif_left').toggleClass('click2 click');
    }); 
});

以上两种方式都能确保每个div始终只拥有click或click2中的一个类，避免样式冲突导致的显示异常。

内容的提问来源于stack exchange，提问作者Kinarin