Почему скрипт не рабтает?

Question

[DimonfromChehov]

собственно сам код. После нажатия кнопки определяется дальнейшее действие.

//Определение нажатой кнопки
btn_status = '0';
btn_1.onclick = function(){
	btn_status = '1';
}
btn_2.onclick = function(){
	btn_status = '2';
}
btn_3.onclick = function(){
	btn_status = '3';
}
btn_4.onclick = function(){
	btn_status = '4';
}
btn_5.onclick = function(){
	btn_status = '5';
}

switch(btn_status){
case '1':
	$("#btn_1").css({
	marginLeft : '5px'
	
	});
break
case '2':
	$("#btn_2").css({
	marginLeft : '5px'
	
	});
break
case '3':
	$("#btn_3").css({
	marginLeft : '5px'
	
	});
break
case '4':
	$("#btn_4").css({
	marginLeft : '5px'
	
	});
break
case '5':
	$("#btn_5").css({
	marginLeft : '5px'
	
	});
break
}

Answer 1

[Евгений Петров]

Ну вообще-то это — жесть.
Вот пример jsfiddle.net/petroveg/rh0nkamw

Ошибки:
— не указан оператор var
— используется инлайн-атрибут события
— не используется делегирование обработки события
— куча однотипных действий

Comments

[Alex]

Это не жесть, это же-е-е-е-е-есть.

Answer 2

[Никита Гущин]

Потому что при нажатии кнопки выполнится только вот эта конструкция:

function(){
    btn_status = 'номер_кнопки';
}

Чтобы все заработало, при нажатии на кнопку надо вызывать еще и код со свитчем

switch(btn_status){
    // ..
}

Но мне крайне не нравится Ваша конструкция. Во-первых: если вы используете jQuery, то используйте его везде. Вместо:

btn_3.onclick = function(){
    btn_status = '3';
}

Пишите:

$(btn_3).click(function(){
    btn_status = '3';
});

Во-вторых: можно использовать this для смещения кнопки:

$(btn_3).click(function(){
    btn_status = '3';
    $(this).css({
        marginLeft : '5px'
    });
});

Answer 3

[Виктор Корейша]

Хорошая идея вообще не смешивать скрипт и стили. Другая хорошая идея отказаться от конских id.

<ul>
   <li class="btn"></li>
   <li class="btn"></li>
   <li class="btn"></li>
   <li class="btn"></li>
</ul>

.btn {display: inline-block; width: 100px; height: 20px; margin: 0;}
.btn.active {margin-left: 5px;}

$('.btn').click(function(){
   $('.btn').removeClass('ative'); //Возвращаем все кнопки на место 
   $(this).addClass('active'); //Двигаем нужную кнопку
})

Может немного кривовато, но суть, думаю, ясна. В качестве todo можно еще проверять что кликнули не по пододвинутой уже кнопке, что бы не делать лишнюю работу. И желательно еще возвращать наместо только сдвинутую кнопку, а не все. Но работать должно и так.

Comments

[DimonfromChehov]

То что нужно!