jQuery onclick для изменения имени класса элемента

У меня есть div с фоновым изображением и, например, его класс - image1.jQuery onclick для изменения имени класса элемента

У меня есть 3 значка, на странице load image1 находится на экране. Когда мой второй значок будет нажат, я хочу, чтобы класс div изменился на image2, который, следовательно, отобразит другое фоновое изображение, и если будет нажат третий значок, он изменится на изображение 3.

Я могу использовать remove/add class в jQuery для удаления «image1», например, но он может быть на image2 и т. д., так что я бы сказал, чтобы удалить «image1» AND «image2» и добавить «image3», и что произойдет в этом случае, потому что только 1 из 2 классов, которые я бы сказал ему удалить, на самом деле там, вызвало бы ошибку?

Правильно ли это делать?

<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'); 
});

источник

2014-11-02 Adrian

Вы просто забыли добавить 'quotes'. '$ (# fullbg)' должен быть '$ ('# fullbg')' –

Поскольку вы используете только один класс там, гораздо лучше сделать:

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

источник

2014-11-02 22:15:07 skobaljic

Это исключает использование любых других классов объекта для других целей, таких как форматирование CSS. Я бы не сказал, что это «намного» лучше. – jfriend00

В примерах он не использует никаких других классов, поэтому он быстрее, меньше кода выполняется и поэтому «намного» лучше. – skobaljic

И, намного менее гибкий и более хрупкий, потому что, если какой-либо инженер-фронтмен решает добавить класс, чтобы помочь с форматированием CSS, все ломается. Производительность не является проблемой вообще в функции типа .click(). Не рекомендуется использовать архитектурные исключения для использования других классов для форматирования. – jfriend00

Прекрасно отображать список классов для удаления. Он просто удалит те, которые присутствуют, и не вызывает никаких ошибок. Это приемлемый способ сделать то, что вы пытаетесь сделать.

FYI, это место, где цепочка упрощает код немного слишком:

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

Поскольку у вас есть много скопированного код в текущей реализации, это, вероятно, лучше DRY до целого реализация только с одним общим обработчиком событий:

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

источник

2014-11-02 22:13:21 jfriend00

Если вам не нужны какие-либо классы для моделирования цели вы можете использовать функцию .removeClass() без параметра. В этом случае все классы удаляются, вам не нужно передавать все возможные классы, которые необходимо удалить.

источник

2014-11-02 22:19:11

Вы можете использовать функцию removeClass. Вот общий рабочий пример с любым количеством изображений.

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

Внутренняя функция создает строку image1 image2 image3 ..., чтобы удалить их.

источник

2014-11-02 22:22:28

jQuery onclick для изменения имени класса элемента

ответ

Смежные вопросы