Question

我很惊讶我找不到类似的问题。当我点击标签部分时，我需要更改一个图标元素。共有6个部分。我有它正在努力添加一个类，正确使用删除类，所以它不会继续在课堂上添加类。我无法做对。

这是我的代码：

<script type="text/javascript"> 
$(document).ready(function(){
     $('.changeImage').click(function()
{var rel = $(this).attr('rel');
 $('.image').addClass("image"+rel);
$(this).siblings().removeClass("image"+rel);
            return false;
         })
 });
</script>

我也试过这个：

$('.image').addClass("image"+rel);
$(this).next().find('.image').removeClass("image"+rel);

它也不起作用。

HTML部分（不包括所有周围的代码）：

 <div><a href="#" class="changeImage" rel="1"><img class="thumb" src="images/image1_thumb.png" /></a></div>

CSS示例：

.image1 {
background:url(images/fast.png) no-repeat;

}

.image2 {background:url(images/peep.png) no-repeat;
}

是否有更有效的方式来交换bg图像？ switchClass是一个选项吗？

我很感激。

我设置它的方式是当你点击一个部分的链接时，它在rel中有一个定义的值，它被添加到类“image”+ rel

由于我有6个不同的链接，它们将与css类image1，image2，image3等共同使用，我想要一个通用的jquery语句，它说添加被点击的类，但删除它或者用下一个类切换它点击的链接。

我可以让它添加多个类，但是在点击其他链接时添加下一个类没有正确删除旧类。

Answer 1

行$('.image').addClass("image"+rel);正在寻找类image的内容，我在您的代码段中没有看到。

通常，您可以通过执行以下操作替换所有现有类：

$('selector').attr('class', '').addClass('newClass');

Answer 2

您可以查看http://api.jquery.com/toggleClass/

基本上你会做$('.changeImage').toggleClass('image2');

之类的事情

这将打开/关闭.image2样式。

Answer 3

css应为 background-image

您可以使用toggleClass

$(document).ready(function(){
    $("a").click(function(e){
        e.preventDefault();
        $("div",this).toggleClass("img1");
    }          
   );
});

jsFiddle example

JQuery switchClass以循环形式包含多个类

3 个答案: