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

[olmensk]

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

 

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

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

 

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

 

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

 

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

Код такой:

 

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

 

 

 

<div class="stena_potolok" ></div>

 

 

 

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

<div class="corusel_color_all">

 <a href="#wheel" class="wheel-button sw">

  <i class="customicon-plus"></i>

 </a>

     <ul id="wheel" data-angle="SW" class="wheel">

       <li class="item"><a class="btn_1" href=""></a></li>

       <li class="item"><a class="btn_2" href=""></a></li>

       <li class="item"><a class="btn_3" href=""></a></li>

     </ul>            

   </div>

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

 

 

 

 

<script>

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

 

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

 

<script type="text/javascript">

    $(".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]

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

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

[olmensk]

У меня в общем 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]

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

$(".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]

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

СПАСИБО!!! 

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

[Int]

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

[Switch74]

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

можно и так

[olmensk]

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

 

 

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

 

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

 

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

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

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

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

});

 

[Switch74]

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

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

});

[olmensk]

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


 

<script>

$(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]

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

[Switch74]

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]

Вот так? :

 

$(".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]

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

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

[Q4Dizzy]

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

 

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

[olmensk]

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

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

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

 

html:

 

<div class="corusel_color_all">

 <a href="#wheel" class="wheel-button sw">

  <i class="customicon-plus"></i>

 </a>

     <ul id="wheel" data-angle="SW" class="wheel">

       <li class="item"><a class="btn_1" href=""></a></li>

       <li class="item"><a class="btn_2" href=""></a></li>

       <li class="item"><a class="btn_3" href=""></a></li>

 

     </ul>            

   </div>

 

 

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

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

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

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


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

[Switch74]

http://jsfiddle.net/n9bxvs0t/

[olmensk]

Switch74

 

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

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

 

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

Switch74

 

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

 

 

 

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

Edited April 8, 2015 by olmensk

[Int]

darck =)))

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