Как изменять и удалять класс только у конкретного элемента с одинаковыми классами?

Question

[maxsnw]

Есть простенький скрипт по присваиванию класса селекту, но таких селектов на странице несколько, соответственно, если я меняю option у одного, класс присваивается всем селектам на странице. Как сделать так, что бы класс добавлялся только конкретному селекту с которым я взаимодействую в данный момент? Так же приму к сведению улучшение читаемости кода.
код ниже:

$(".currency-type").change(function(){
    if($(this).val() == 1){
        $(".currency-type").addClass('currency-usd');
        $(".currency-type").removeClass('currency-eur currency-rub currency-chf currency-gbp');
    }
    else {
        $(".currency-type").removeClass('currency-usd');
    }
    if($(this).val() == 2){
        $(".currency-type").addClass('currency-eur');
        $(".currency-type").removeClass('currency-usd currency-rub currency-chf currency-gbp');
    }
    else {
        $(".currency-type").removeClass('currency-eur');
    }
    if($(this).val() == 3){
        $(".currency-type").addClass('currency-rub');
        $(".currency-type").removeClass('currency-usd currency-eur currency-chf currency-gbp');
    }
    else {
        $(".currency-type").removeClass('currency-rub');
    }
    if($(this).val() == 4){
        $(".currency-type").addClass('currency-gbp');
        $(".currency-type").removeClass('currency-usd currency-rub currency-chf currency-eur');
    }
    else {
        $(".currency-type").removeClass('currency-gbp');
    }
    if($(this).val() == 5){
        $(".currency-type").addClass('currency-chf');
        $(".currency-type").removeClass('currency-usd currency-rub currency-gbp currency-eur');
    }
    else {
        $(".currency-type").removeClass('currency-chf');
    }
});

UPD: Так-с, возникла теперь другая беда если использовать (this). Так как я использую стилизацию селекта, то плагин скрывает дефолтный селект и ставит свой див с классом селекта и классом плагина (.nice-select). По коду я вижу, что при изменении классы присваиваются, но они присваиваются данному селекту, который скрыт, а плагиновский блок, так и остается висеть сам по себе без изменений.

Comments

[V Sh.]

Используете внутри функции не $(".currency-type"), а $(this). У вас уже половина решения в самом вопросе есть)

Answer 1

[Павел Корнилов]

В value писать не числа, а имя класса.
Тогда:

$(".currency-type").change(function(){
 this.addClass(this.val());
}

Answer 2

[ой всё]

учитесь назначать элементам уникальные id и всегда обращаться через них в коде, и будет вам счастье

а css классы оставьте для дизайна

улучшения читаемости кода у вас не будет до тех пор, пока вы не будете ясно представлять, что у вас происходит на странице, и уж ни в каком варианте улучшение читаемости кода не может быть самоцелью

сначала объектная модель и алгоритм, а потом уже читаемость появлятся сама

Comments

[sim3x]

Как при таком подходе делать плагины, которые требуется вставлять в верстку автоматом?

[Alexander Litvinenko]

id часть семантики, это используеться когда нужно однозначно идентифицыровать элемент, речь не о том что он уникалоен а о том когда его уникальность надо подчеркнуть для лучшей читаемости кода.

Это не тот случай когда в коде несколько равнозначных элементов. В немодульной разработке обычно применяються для селекторов дата атрибуты, а когда надо обратиться к текущему элементу то this(случай автора)

Но да, чисто технически можно и по id, но как тимлид я своим за такое руки поломаю и буду прав.

[sim3x]

ой всё,
Кейс
Кнопка купить, которая открывает попап

[Alexander Litvinenko]

ой всё, у верстальщаков и фронтендеров немного разный взгляд на схожие вещи.

[sim3x]

ой всё,
Не проблема

Раскажите, как вставить, то что вы считаете плагином, в страницу просто и прозрачно в нескольких местах, не указывая ето явно для каждого отдельного екземпляра плагина

[maxsnw]

Там UPD подъехал к посту, ознакомьтесь п-та

[Alexander Litvinenko]

ой всё, это тоже вопрос семантики, безусловно фронтендер должен уметь верстать и намного лучше того, кого подразумевают верстальщиком. Однако в современном мире под фронтендером чаще всего подразумевают человека умеющего безусловно на порядок больше чем просто верстка.

Типовая минимальная планка фронтендера это умение работы с React. Такой специалист как не странно часто особо хорошо не верстает, и много пишет JS нам где можно былобы обойти одним CSS.

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

[sim3x]

ой всё,

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

Покажите как

все они создаются динамически с уникальными id

и как происходит их привязка к плагину

[Alexander Litvinenko]

ой всё, Ой всё =)

[Alexander Litvinenko]

ой всё,

sim3x, обоснуйте необходимость нескольких экземпляров одного и того же плагина

Как насчет двух слайдеров с различными настройками?

[Илья Герасимов]

ой всё, работать с элементами нужно в рамках контекста (ведь каждая секция по сути своей независима и изменяется относительно своего родительского компонента/контекста), а не дергать их по id, это порождает говнокод, весь код будет в куче идентификаторов, в случае с реактом весь код будет в рефах, фе

[Alexander Litvinenko]

ой всё, возможно покажите нам смертным пример того как надо это делать? так понимаю много раз уже делали подобное и понимаете о чем мы тут с вами говорим.

[sim3x]

ой всё, те кода у вас нет
Ок

[sim3x]

ой всё, Я обязательно посмотрю в тот волшебный, код о котором вы рассказывали, когда вы его предоставите

[sim3x]

ой всё, Как изменять и удалять класс только у конкретного элемента с одинаковыми классами?

[Alexander Litvinenko]

ой всё, неумеете вы принимать поражения, даже не вспомни ниодного популярно плагина где делаеться по вашей методике. Скорее уж по нашей их куча.

Скажите, а как удалить один класс если ух елемента два? а вы кстати знаете что их может быть два?

смертные не знают, что такое json? о_О

Начет JSON, зачем мне хранить настройки плагина в строке если я могу их записать в нативный объект? какой популярный плагин понимает такой способ передачи настроект? ниодного не вспомню. Возможно вы имеете ввиду присвоение атрибута с JSON тегу? так это ведь и будет то что делают дата атрибуты, там даже JSON не нужен, хотя и возможен в виде строки. Возможно вы не знали что такое дата атрибуты?

[Илья Герасимов]

ой всё, нифига не понял, мои обработчики знают что их вызвало и работают с этим контекстом изменяя состояние компонента, а вы предлагаете не использовать контекст, а оперировать элементами по их ID, которые заранее разработчик обозначает, вот как минимум первая проблема:
1) Программист А написал плагин обратной связи lite версия в сплывающем окошке, навесил id contact
2) Программист Б написал плагин обратной связи full версия на отдельной странице, навесил id contact
Оба программиста друг о друге не знают и понятия не имеют о идентификаторах уже используемых, как итог модалка не работает на полной странице контактов, тк получаем определение двух идентификаторов, что уже какбэ недопустимо. Поэтому идентификаторы редко используются, точнее вообще никогда, максимум ими можно обозначить глобальные контейнеры.

Я придерживаюсь практики что 1 действие порождает 1 событие, которое в свою очередь может породить по цепочке другие события, но как итог на одно действие у меня только один обработчик, поэтому аналогию с несколькими обработчиками на одно действие честно сказать не понял.

[ой всё]

зачем мне принимать ваши поражения? это сугубо ваши проблемы

и в каком месте речь идет о моей методике? речь идет о настройках плагинов, которые задаются в json, плагин один, вариантов json может быть сколько угодно; вы, видимо, никогда с базами данных не имели дела и не знаете как пишется бэкенд, хотя есть масса умельцев, которые и бэкенд пишут так же как вы пишете фронт

если вы не видели ни одного плагина с json, путаете классы объектов с классами css и до сих пор пишете данные и код в html, то о чем с вами вообще разговаривать? :)

[Илья Герасимов]

ой всё, Я писал длинный комментарий, но решил ..забил, прослойка между монитором и креслом ненужна все и так сгенерируется. Запустил run build-me-ohyenchik и пошел смотреть сериальчик Гавайи 5-0 сезон 3 серия 9

[Илья Герасимов]

ой всё, Я научу девчонок убивать и потрошить свиней это новык выживания

Answer 3

[SOKR]

Попробуйте как тут, не идеал, конечно, но читаемость улучшена.
https://codepen.io/diadiafiodor/pen/yPWNYj

Comments

[maxsnw]

У вас просто тоглятся два класса, а у меня присваиваются разные в зависимости на каком option ткнули, немножно не то.

[SOKR]

maxsnw, и это можно
https://codepen.io/diadiafiodor/pen/wPbmaX