toggleClass не получается сменить картинку по второй кнопке.

olmensk · April 7, 2015

Ситуация следующая:

У меня есть div, есть 3 кнопки.

Нужно по нажатию на кнопки менять цвет div.

Всё вроде бы просто. И всё работает. ТОЛЬКО для переключения на следующий цвет, нужно типа "отключить" предыдущий.

Тоесть. Я нажал на кнопку1 и загорелся красный. Нажал на кнопку2 и ничего не происходит.. горит красный... пока я не "отключу" кнопку1.
Получается для включения второго цвета, нужно как бы выключить кнопку того цвета который сейчас.

А надо! Что б цвет переключался по нажатию на нужную мне кнопку.

Код такой:

..................................................................................................................................................

<!——————— кнопка смены цвета color.css———————->

</a>

</ul>

</div>

<!——————————————————————————-->

$(document).ready(function(){

$(".btn_1").click(function(){

$(".stena_potolok").toggleClass("stena_potolok_white"); return false;

});

$(".btn_2").click(function(){

$(".stena_potolok").toggleClass("stena_potolok_darck"); return false;

});

$(".btn_3").click(function(){

$(".stena_potolok").toggleClass("stena_potolok_red"); return false;

});

</script>

<!————————————————————————->

$(".wheel-button").wheelmenu({

trigger: "hover",

animation: "fly",

angle: "NW"

});

</script>

....................................................................................................................................................................

При нажатии на кнопку btn_1, toggleClass - м меняется в файле css: stena_potolok на stena_potolok_darck

Просто прописаны 2 стиля в одном белый цвет а во втором чёрный.

Есть ещё 2 стиля stena_potolok_red и stena_potolok_white

В общем помогите люди добрые... мы не месные и в js не особо сильны.... как правильно и что написать?

Switch74 · April 8, 2015

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

if($(".stena_potolok").hasClass('stena_potolok_red')) $(".stena_potolok").toggleClass("stena_potolok_red");

olmensk · April 8, 2015

У меня в общем 9 цветов.
Каждая кнопка это один цвет.

К примеру разберёмся с первой кнопкой btn_1

Как мне правильно написать код если исходный такой:

$(".btn_1").click(function(){

$(".stena_potolok").toggleClass("stena_potolok_white"); return false;

});

мне надо так? (извините, за малые знания я как робот пока умею, как покажут, я копи-паст) :

$(".btn_1").click(function(){

$(".stena_potolok").toggleClass("stena_potolok_white");

if($(".stena_potolok").hasClass('stena_potolok_red')) $(".stena_potolok").toggleClass("stena_potolok_red"); return false;

});

тоесть if($(".stena_potolok").hasClass('stena_potolok_red')) добовляет цвет red,

а $(".stena_potolok").toggleClass("stena_potolok_red") удаляет цвет red

что-то сложно понимаю.... практически в ноль.

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

Я понял, что мой скрипт просто заменяет один стиль на другой.
Ваш скрипт что-то проверяет и если чего-то нет он добовляет а что-то убирает,.... а что и где?

И если можно на 9 цветов:

white

black

green

orange

yellow

blue

blue_deep

feeolet

Если можете, напишите скрипт правильно, я скопирую и попробую у себя...

Понимаю, что немножко наглость, но я реально понять не могу. Спасибо заранее.

Edited April 8, 2015 by olmensk

Switch74 · April 8, 2015

в двух словах - вам нужно сделать следующее для кнопки которая включает фон:

$(".btn_1").click(function(){$(".stena_potolok").toggleClass("stena_potolok_white");return false;});

добавить выключение других фонов

здесь мы проверяем, включен ли у вас красный

if($(".stena_potolok").hasClass('stena_potolok_red'))

если да, то мы его выключаем

$(".stena_potolok").toggleClass("stena_potolok_red");

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

if($(".stena_potolok").hasClass('stena_potolok_red')) $(".stena_potolok").toggleClass("stena_potolok_red");

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

function offColor(){if($(".stena_potolok").hasClass('stena_potolok_white')) $(".stena_potolok").toggleClass("stena_potolok_white");if($(".stena_potolok").hasClass('stena_potolok_black')) $(".stena_potolok").toggleClass("stena_potolok_black");if($(".stena_potolok").hasClass('stena_potolok_green')) $(".stena_potolok").toggleClass("stena_potolok_green");if($(".stena_potolok").hasClass('stena_potolok_orange')) $(".stena_potolok").toggleClass("stena_potolok_orange");if($(".stena_potolok").hasClass('stena_potolok_yellow')) $(".stena_potolok").toggleClass("stena_potolok_yellow");if($(".stena_potolok").hasClass('stena_potolok_blue')) $(".stena_potolok").toggleClass("stena_potolok_blue");if($(".stena_potolok").hasClass('stena_potolok_blue_deep')) $(".stena_potolok").toggleClass("stena_potolok_blue_deep");if($(".stena_potolok").hasClass('stena_potolok_feeolet')) $(".stena_potolok").toggleClass("stena_potolok_feeolet");if($(".stena_potolok").hasClass('stena_potolok_red')) $(".stena_potolok").toggleClass("stena_potolok_red");}

и теперь вставляете в свои обработчики вызов этой функции (во все)

$(".btn_1").click(function(){offColor();$(".stena_potolok").toggleClass("stena_potolok_white");return false;});

olmensk · April 8, 2015

Аааа.... ))))

СПАСИБО!!!

Вы просто чудо! Замечательный человек! )))) Огромное спасибо! ))))))))

Int · April 8, 2015

А разве нельзя $('.aaaa').removeClass('a1, a2, a3, a4, a5') сделать? Зачем hasClass городить?

Switch74 · April 8, 2015

А разве нельзя $('.aaaa').removeClass('a1, a2, a3, a4, a5') сделать? Зачем hasClass городить?

можно и так

olmensk · April 8, 2015

А можно этот способ подробней?

$('.aaaa').removeClass('a1, a2, a3, a4, a5')

.аааа -это кнопка btn_

a1, a2, a3 ... это что?

И как это встроить в :

$(".btn_1").click(function(){

$(".stena_potolok").toggleClass("stena_potolok_white"); return false;

});

Switch74 · April 8, 2015

$(".btn_1").click(function(){

$(".stena_potolok").removeClass('stena_potolok_white, stena_potolok_black, stena_potolok_green, и т.д.').toggleClass("stena_potolok_white"); return false;

});

olmensk · April 8, 2015

Я наверно какой-то затупок, но у меня не работает....

$(document).ready(function(){

$(".btn_1").click(function(){

$(".stena_potolok").toggleClass("stena_potolok_white");

$(".stena_potolok").removeClass(' stena_potolok_white, stena_potolok_darck, stena_potolok_green, stena_potolok_orange, stena_potolok_yellow, stena_potolok_green, stena_potolok_blue, stena_potolok_blue_deep, stena_potolok_feeolet ').toggleClass("stena_potolok_white"); return false;

});

$(".btn_2").click(function(){

$(".stena_potolok").toggleClass("stena_potolok_darck");

$(".stena_potolok").removeClass('stena_potolok_white, stena_potolok_darck, stena_potolok_green, stena_potolok_orange, stena_potolok_yellow, stena_potolok_green, stena_potolok_blue, stena_potolok_blue_deep, stena_potolok_feeolet ').toggleClass("stena_potolok_white"); return false;

});

$(".btn_3").click(function(){

$(".stena_potolok").toggleClass("stena_potolok_red");

return false;

});

$(".btn_4").click(function(){

$(".stena_potolok").toggleClass("stena_potolok_orange");

return false;

});

$(".btn_5").click(function(){

$(".stena_potolok").toggleClass("stena_potolok_yellow");

return false;

});

$(".btn_6").click(function(){

$(".stena_potolok").toggleClass("stena_potolok_green");

return false;

});

$(".btn_7").click(function(){

$(".stena_potolok").toggleClass("stena_potolok_blue");

return false;

});

$(".btn_8").click(function(){

$(".stena_potolok").toggleClass("stena_potolok_blue_deep");

return false;

});

$(".btn_9").click(function(){

$(".stena_potolok").toggleClass("stena_potolok_feeolet");

return false;

});

</script>

Всё ровно для включения следующего цвета, нужно предыдущий отключать....

а надо, что б автоматически... ....

Ну тупой я...

Немного опишу, что происходит.

К примеру если клацать попорядку кнопки с права на лево, то цвет меняется последовательно той кнопки которую нажали и всё нормально.
Вот мы проклацали подряд по порядку все кнопки с права на лево и всё работает. А ТЕПЕРЬ клацаем в ОБРАТНОМ направлении с лева на право И!!! Ничего не происходит! Пока те кнопки не "отожмёшь" обратно.!

Edited April 8, 2015 by olmensk

Sensei · April 8, 2015

Как вариант http://jsfiddle.net/674fpLwe/

Switch74 · April 8, 2015

1. у вас только в первых двух кнопках код вставлен

2. зачем вам в коде

$(".btn_2").click(function(){$(".stena_potolok").toggleClass("stena_potolok_darck");      $(".stena_potolok").removeClass('stena_potolok_white, stena_potolok_darck, stena_potolok_green, stena_potolok_orange, stena_potolok_yellow, stena_potolok_green, stena_potolok_blue, stena_potolok_blue_deep, stena_potolok_feeolet ').toggleClass("stena_potolok_white"); return false;});

$(".stena_potolok").toggleClass("stena_potolok_darck"); если в конце следующей строки есть добавление класса

3. вы не изменили переключение класса во второй кнопке во вставленном коде с toggleClass("stena_potolok_white"); на toggleClass("stena_potolok_darck");

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

olmensk · April 8, 2015

Вот так? :

$(".btn_1").click(function(){

$(".stena_potolok").removeClass('stena_potolok_white, stena_potolok_darck, stena_potolok_red,').toggleClass("stena_potolok_white"); return false;

});

$(".btn_2").click(function(){

$(".stena_potolok").removeClass('stena_potolok_white, stena_potolok_dark, stena_potolok_red,').toggleClass("stena_potolok_darck"); return false;

});

$(".btn_3").click(function(){

$(".stena_potolok").removeClass('stena_potolok_white, stena_potolok_darck, stena_potolok_red,').toggleClass("stena_potolok_red"); return false;

});

Всё ровно не работает.
В одну сторону переключает, а в обратную нет.

я ж сказал, я не особый знаток как и что надо... с js только только начал знакомится. Всю инфу перечитал, но без опытного чела не обойтись.

Edited April 8, 2015 by olmensk

Sensei · April 8, 2015

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

Вы его хоть смотрели?

Q4Dizzy · April 8, 2015

Как вариант http://jsfiddle.net/674fpLwe/

Кстати - самый норм вариант.. Добавление лишних обработчиков - не есть гуд.

olmensk · April 8, 2015

Да, смотрел. Вариант нормальный, но у меня не простые кнопочки.

Это МЕНЮ на js и CSS, выпадающее по окружности из правого верхнего угла сайта. Оно выпадает ввиде кнопочек таким полукругом. Кнопочки ввиде просто цветных кружочков.

У меню такой код.

html:

</a>

</ul>

</div>

и в css там полный лист описание, поэтому поменять практически очень сложно.

когда просто меняю названия под скриптовые названия, меню не работает.

Когда скриптовые названия меняю на названия из html меню не работает...

я уже отчаялся.

Предыдущий вроде как работает, но "в одном направлении" с права на лево, в обратном надо отключать уже включенные...

Switch74 · April 8, 2015

http://jsfiddle.net/n9bxvs0t/

olmensk · April 8, 2015

Switch74

Вот не поверишь!!! ТАК уже делал и у меня не работало!!! ))) Ты скинул ссылку и всё заработало! )))))))))))))

Всёровно ОГРОМНЕЙШЕЕ спасибо ВСЕМ ВСЕМ ВСЕМ.

Вы все классные!!! ))))

Switch74

РАБОТАЕТ!!! ))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))

Ты не представляешь сколько я время потратил на это!!!! 2 дня!! До тебя. Спасибо!

Edited April 8, 2015 by olmensk

Int · April 8, 2015

darck =)))

Логичнее, кстати, после removeClass вставлять addClass, но по результату своего действия оно в данном случае, конечно, не отличимо от toggle. Просто с add всё понятно, если глаз вдруг наткнётся в будущем, а с toggle могут появиться размышления, вдруг в предыдущем длинном списке этот класс не отключается, тогда toggle его может отключить.

Sign In

toggleClass не получается сменить картинку по второй кнопке.

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Important Information