JQuery switchClass 具有循环形式的多个类

发布于 2024-12-02 18:03:20 字数 1224 浏览 2 评论 0原文

我很惊讶我找不到类似的问题。当我单击选项卡部分时，我需要更改一个图标元素。有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;
}

是否有更有效的方法来交换背景图像？ switchClass 是一个选项吗？

我很感激。

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

因为我有 6 个不同的链接，它们将与 css 类 image1 对应、image2、image3 等，我想要一个通用的 jquery 语句，该语句表示添加单击的类，但将其删除或将其与单击的下一个链接的类进行切换。

我可以让它添加多个类，只是在单击其他链接时添加下一个类时无法正确删除旧类。

原文

I am surprised I can't find a similar question out there. I have an icon element that I need to change when I click on a tab section. There are 6 sections. I have it working to add a class, tried properly using remove class so it doesn't keep adding class upon class. I just can't get it right.

Here is my code:

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

I have also tried this:

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

It doesn't work either.

HTML portions (not including all surrounding code):

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

CSS example:

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

}

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

Is there a more efficient way of swapping out bg images? Is switchClass an option?

I appreciate it.

The way I have it set up is that when you click on the link to a section, it has a defined value in rel that gets added to the class "image"+rel

Since i have 6 different links that will coorespond with css classes image1, image2, image3, etc, i want a general jquery statement that says add the class that is clicked, but remove it OR switch it with the class of the next link that is clicked.

I can get it to add multiple classes, just not properly remove the old while adding the next upon clicking other links.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

望她远 2024-12-09 18:03:20

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

一般来说，您可以通过执行以下操作将所有现有类替换为新类：

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

回复收藏 0 原文

天冷不及心凉 2024-12-09 18:03:20

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

基本上您会做一些事情就像 $('.changeImage').toggleClass('image2');

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

回复收藏 0 原文

不爱素颜 2024-12-09 18:03:20

css 应该是background-image

你可以使用toggleClass

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

jsFiddle example

css should be background-image

You can use toggleClass

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

jsFiddle example

回复收藏 0 原文

~没有更多了~