Как оптимизировать код Jquery?

Question

[Владимир Бельков]

Всем привет есть код html

<ul class="list-group services_check">
	<form method="POST">	
		<li class="list-group-item">
			<input id="text2" type="hidden" name="id_service[2]" value="0">
			<button id="but2" class="btn btn-default" type="button">
				 <i class="icon-list-add"></i>
			</button>
			Услуга 1
		</li>
		<li class="list-group-item">
			<input id="text3" type="hidden" name="id_service[3]" value="0">
			<button id="but3" class="btn btn-default" type="button">
				<i class="icon-list-add"></i>
			</button>
			Услуга 2
		</li>
		<li class="list-group-item">	-//- -// -//</li>	
		<li class="list-group-item">	-//- -// -//</li>	
		и тд вплоть до 15 штук
	</form>
</ul>

Так же есть Jquery код

$(document).ready(function() {
	$('.services_check button').click(function(){
		var my = $(this).find('i');
		if(my.hasClass('icon-check')){
			my.removeClass('icon-check').addClass('icon-list-add');		
			$("#but2").click(function(){$("#text2").val("1");});
			$("#but3").click(function(){$("#text3").val("1");});
			$("#but4").click(function(){$("#text4").val("1");});
		}
		else{
			my.addClass('icon-check').removeClass('icon-list-add');	
			$("#but2").click(function(){$("#text2").val("0");});
			$("#but3").click(function(){$("#text3").val("0");});
			$("#but4").click(function(){$("#text4").val("0");});
		}
		$(this).toggleClass('btn-primary').toggleClass('btn-default');
		$(this).blur();
	});
});

Вопрос как мне оптимизировать его чтоб не плодить эти конструкции

$("#but2").click(function(){$("#text2").val("1");});
$("#but3").click(function(){$("#text3").val("1");});
$("#but4").click(function(){$("#text4").val("1");});

и

$("#but2").click(function(){$("#text2").val("0");});
$("#but3").click(function(){$("#text3").val("0");});
$("#but4").click(function(){$("#text4").val("0");});

Плюс они не сразу отрабатывают переключение value с 1 на 0

Comments

[Andrew]

чет как-то сложно всё. что происходить должно? распиши, может и тебе понятнее станет. .клик, внутри него условие, потом внутри еще 3 эмулятора клика и еще 2 тогла с блюром, нифига ты механизм строишь.

[Владимир Бельков]

Andrew,Что нужно , я на php вывожу из базы список услуг, их можно выбрать обычным нажатием кнопки button, при нажатии у нивидимого поля должен поменяться value параметр на 1 , я в обработчике формы на пхп его сравниваю и если он равен 1 , то записываю в базу , а которые 0 то не записываю

а если нажал ещё раз то становится 0 обратно

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

[Andrew]

Владимир Бельков, Пиши обработчик сразу на все кнопки, он будет 1 и от него отталкивайся, бегая( .find, .parent , .closest и т.п.) по дереву обьектов от него

[Даниил]

Почитайте про делегирование событий, без этого ни куда, представь что у тебя 1000 кнопок и все они обрабатываю КЛИК, у тебя запускается 1000 циклов слежения за кнопками, да еще и 1000 раз обработчик писать прийдется. С делегированием, благодаря всплытию событий вверх, можно назначить всего 1 обработчик событий, и в нем уже узнавать какой элемент из его дочерних был Кликнут.
$('form').click(function(e){
var target = e.target || e.srcElement; // получили элемент где всплыло событие
switch(target.id){
case "but1" : // обработка
//....

Answer 1

[Павел Антонов]

$(document).ready(function() {
  $('.services_check button').click(function(){
    var my = $(this).find('i');

    if(my.hasClass('icon-check')){
      my.removeClass('icon-check').addClass('icon-list-add');  
      $(this).prev().val("1");
    }
    else{
      my.addClass('icon-check').removeClass('icon-list-add');   
      $(this).prev().val("0");
    }

    $(this).toggleClass('btn-primary').toggleClass('btn-default');
    $(this).blur();
  });
});

Comments

[Владимир Бельков]

спасибо, твой рецепт помог

[Andrew]

Владимир Бельков, точно все значения для input'ов поменял?) или для одного, там где кнопка?

[Павел Антонов]

не за что

[Владимир Бельков]

Andrew, каждый для своего

[Владимир Бельков]

Andrew, тебе то же спасибо !

Answer 2

[BB 8]

НУ, можно возвращать при клике объект
<li class="list-group-item">,
и искать нужных "детей" у которых нужно изменить val.

Answer 3

[Andrew]

$(document).ready(function() {
  $('.services_check button').click(function(){
    var my = $(this).find('i');
    if(my.hasClass('icon-check')){
      my.removeClass('icon-check').addClass('icon-list-add');		
      $('.services_check .list-group-item input').val("1");
    }
    else{
      my.addClass('icon-check').removeClass('icon-list-add');	
      $('.services_check  .list-group-item input').val("0");
    }
    $(this).toggleClass('btn-primary').toggleClass('btn-default');
    $(this).blur();
  });
});

так работает?
Если есть какая-то зависимость, от текущей кнопки(после клика), то можешь подниматься .closest , что-то типа

...
    if(my.hasClass('icon-check')){
      my.removeClass('icon-check').addClass('icon-list-add');		
      $(this).closest('.list-group-item').find('input').val("1");
    }
...

Comments

[Владимир Бельков]

Первый вариант не работает
Второй вариант то же не работает

[Andrew]

Владимир Бельков, что не работает? значения меняет...