Почему не работает код?

Question

[Дмитрий]

$('#right').on('click', '.firstcircle, .secondcircle, .thirdcircle, .fourthtcircle', 
    function(){
    var findSelected = $("div.selectedcircle");
    var selectedElementId = $(selectedElement).attr('data-slide');
    $('.firstcircle, .secondcircle, .thirdcircle, .fourthtcircle').removeClass('selectedcircle');
    if ($(selectedElementId)).is("4") {
        $('.firstcircle').addClass('selectedcircle');}
    else if ($(selectedElementId)).is("1") {
        $('.secondcircle').addClass('selectedcircle');}
    else if ($(selectedElementId)).is("2") {
        $('.thirdcircle').addClass('selectedcircle');}
    else {$('.fourthcircle').addClass('selectedcircle');}
    });

Суть: при клике на элемент с #right, скрипт находит div с классом selectedcircle. Узнает значение data-slide у этого элемента. Далее начинается проверка условий. Если data-slide = 4, тогда div с классом firstcircle получает класс selectedcircle. Если data-slide = 1, то div с классом secondcircle получает selectcircle и так до пока не проверит 4 элемента. Код ужасен, понимаю, с JS знаком "полтора дня". И да, он не работает. Все спасибо.

Comments

[1001001 111]

наверно руки не оттуда растут =)

Answer 1

[Петруша Укропов]

Проверка на внимательность

var findSelected = $("div.selectedcircle");
    var selectedElementId = $(selectedElement).attr('data-slide');

Проверка на внимательность 2:
else if ($(selectedElementId)).is("1") {

Где вы такому научились?
$(selectedElementId)).is("2")
Правильно:
if(selectedElementId == 2)

Comments

[Дмитрий]

В первых двух случаях переменные не верные, да? В третьем - все эти интернеты. про "is" нашел на jquery-docs.ru :( Благодарю, добрый человек

[Петруша Укропов]

var selectedElementId = $(selectedElement).attr('data-slide');
откуда вы здесь берете selectedElement ?

[Петруша Укропов]

Здесь:
else if ($(selectedElementId)).is("1") {

я намекаю на то что условие составлено неверно:
else if ( $(selectedElementId) ).is("1") {

Answer 2

[Юрий Лобанов]

jsfiddle.net/iiil/a45Q4
Попробуйте сделать как-нибудь так. Что Вы плодите классы, старайтесь делать все адаптивным, на случай, если понадобится еще один пункт меню. Вот пример с 10 пунктами:
jsfiddle.net/iiil/a45Q4/1

Comments

[Дмитрий]

@iiil jsfiddle.net/y8fQY Очень странно работает :) Только 2й и 4й элементы задействованы. Помоги разобраться? Спасибо.

[Юрий Лобанов]

@another_dream спасибочки, но нет. Во-первых, у тебя верстка - атас! ТЫ почему внутрь ссылок вставляешь дивы?
Вот ты посмотри на мою аккуратную верстку и на свою. Иди от простого к сложному и разберешься.

[Юрий Лобанов]

Проверь, все ли селекторы у тебя правильные, классов столько городить не надо.

[Юрий Лобанов]

@iiil например, num = $('.circles .OneCircle') - это массив всех 4 пунктов, а у тебя по селектору получается один первый пункт.

[Дмитрий]

Спасибо. Разобрался в этом коде. И почистил, по вашему наставлению. Благодарю

Answer 3

[Дмитрий]

$('#right').on('click', '.firstcircle, .secondcircle, .thirdcircle, .fourthtcircle', 
    function(){
    var findSelected = $("div.selectedcircle");
    var selectedElementId = $(findSelected).attr('data-slide');
    $('.firstcircle, .secondcircle, .thirdcircle, .fourthtcircle').removeClass('selectedcircle');
    if (selectedElementId == 4) {
        $('.firstcircle').addClass('selectedcircle');}
    else if (selectedElementId == 1) {
        $('.secondcircle').addClass('selectedcircle');}
    else if (selectedElementId == 2) {
        $('.thirdcircle').addClass('selectedcircle');}
    else {$('.fourthcircle').addClass('selectedcircle');}
    });

@artishok , Теперь верно?