JQuery switchClass с несколькими классами в форме цикла - PullRequest
Новая
       13

JQuery switchClass с несколькими классами в форме цикла

0 голосов
/ 01 сентября 2011

Я удивлен, что не могу найти подобный вопрос там. У меня есть элемент значка, который мне нужно изменить, когда я нажимаю на вкладку раздела. Есть 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, который говорит, что добавьте класс, по которому щелкнули, но удалите его ИЛИ переключите его с классом следующего ссылка, по которой щелкают.

Я могу заставить его добавить несколько классов, но не удаляю должным образом старые, добавляя следующие при переходе по другим ссылкам.

Ответы [ 3 ]

0 голосов
/ 01 сентября 2011

Вы можете проверить http://api.jquery.com/toggleClass/

По сути, вы бы сделали что-то вроде $('.changeImage').toggleClass('image2');

Включает / выключает стиль .image2.

0 голосов
/ 01 сентября 2011

css должно быть background-image

Вы можете использовать toggleClass 

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

jsFiddle пример

0 голосов
/ 01 сентября 2011

Строка $('.image').addClass("image"+rel); ищет что-то с классом image, которого я не вижу в вашем фрагменте кода.

В общем случае вы можете заменить все существующие классы новым:делать:

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

...