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

Всем привет есть код 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
  • Вопрос задан
  • 131 просмотр
Решения вопроса 1
freislot
@freislot
Frontend-разработчик
$(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();
  });
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
fruity4pie
@fruity4pie
A
НУ, можно возвращать при клике объект
<li class="list-group-item">,
и искать нужных "детей" у которых нужно изменить val.
Ответ написан
KickeRocK
@KickeRocK
Atom Power!
$(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");
    }
...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы