Question

我有一个带背景图像的div，例如，它的类是image1。

我有3个图标，页面加载图像1在屏幕上。单击我的第二个图标时，我希望div的类更改为image2，因此将显示不同的背景图像，如果单击第3个图标，它将更改为图像3。

我可以在jQuery中使用remove / add类来删除＆＃34; image1＆＃34;例如，但它可能在image2等..所以我会告诉它删除＆＃34; image1＆＃34; AND＆＃34; image2＆＃34;并添加＆＃34; image3＆＃34;，以及在这种情况下会发生什么，因为我告诉它删除的2个类中只有1个实际存在，是否会导致错误？

这是正确的做法吗？

<div id="fullbg" class="image1></div>
<a class="img1link" href="#">show image 1</a>
<a class="img2link" href="#">show image 2</a>
<a class="img3link" href="#">show image 3</a>

$('.img1link').click(function() {
    $(#fullbg).removeClass('image2 image3');
    $(#fullbg).addClass('image1');
});

$('.img2link').click(function() {
    $(#fullbg).removeClass('image1 image3');
    $(#fullbg).addClass('image2');
});

$('.img3link').click(function() {
    $(#fullbg).removeClass('image1 image2');
    $(#fullbg).addClass('image3');
});

Answer 1

由于你只使用一个课程，所以要做得更好：

$(#fullbg).attr('class', 'image3');

Answer 2

列出要删除的一堆类是完全没问题的。它将删除存在的那些并且不会导致任何错误。这是做你正在尝试做的事情的可接受方式。

仅供参考，这是一个链接简化代码的地方：

$("#fullbg").removeClass('image2 image3').addClass('image1');

由于您当前的实现中有大量复制代码，因此只需一个公共事件处理程序，DRY整个实现可能会更好：

$("#fullbg a").click(function() {
    var num = $(this).index() + 1;
    $("#fullbg").removeClass('image1 image2 image3').addClass('image' + num);
});

Answer 3

如果您不需要任何类来进行样式设置，则可以使用不带参数的函数 .removeClass（）。在这种情况下，所有类都被删除，您不必传递应该删除的所有可能的类。

Answer 4

您可以将功能传递给removeClass。这是一个包含任意数量图像的通用工作示例。

$("#fullbg").removeClass( function() { 
    classNames = "";
    for(var i = 0; i < images.length; ++i) {
        classNames += "image" + (i+1) + " ";
    }
    return classNames;
}).addClass("image1");

内部函数创建字符串image1 image2 image3 ...以删除它们。

jQuery onclick更改元素的类名

4 个答案: