Использование одной функции click

348

19 января 2017, 05:14

Подскажите пожалуйста можно ли использовать одну функцию для нескольких задач.

Пример №1:

1) Есть поля с id — #p1, #p2, #p3

2) Есть кнопки с id — #b1, #b2, #b3

при клике на поле (например с id - p1), должна вызываться функция и происходить действие с кнопкой у которой id - b1

$('#p1').click(function () {
    $('#b1').iCheck('uncheck');;
});
$('#p2').click(function () {
    $('#b2').iCheck('uncheck');;
});
$('#p3').click(function () {
    $('#b3').iCheck('uncheck');;
});

Можно ли как-то объединить (сократить) код? Сейчас все работает хорошо, но смущает тот факт что если много полей и кнопок, соответственно и много кода.

Если просто ID прописать списком, то при клике на какое либо одно поле естественно происходит действие со всеми кнопками (чего не нужно в итоге).

$('#p1, #p2, #p3 ').click(function () {
    $('#b1, #b2, #b3').iCheck('uncheck');;
});

Спасибо.

Answer 1

Первый вариант обойтись циклом, например:

var COUNT_OF_FIELDS = 3; 
for (var i = 1; i <= COUNT_OF_FIELDS; i++) { 
  (function (i) {	 
    $('#p' + i).click(function () { 
        //$('#b'+i).iCheck('uncheck'); 
        console.log($('#b'+i).text()); 
    }); 
   }(i)); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<p id="p1">p1</p> 
<b id="b1">b1</b> 
<p id="p2">p2</p> 
<b id="b2">b2</b> 
<p id="p3">p3</p> 
<b id="b3">b3</b>

Но это несколько избыточно.

Поэтому лучше на основе html разметки просто плясать от тега p (или что там под айдишниками скрывается), на который нажали и искать соответствующий ему b

пример

$('p').on('click', function(){ 
	var bTag = $(this).next('b'); 
	console.log(bTag.text()); 
  //bTag.iCheck('uncheck'); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div> 
  <p>p1</p> 
  <b>b1</b> 
</div> 
<div> 
  <p>p2</p> 
  <b>b2</b> 
</div> 
<div> 
  <p>p3</p> 
  <b>b3</b> 
</div>

Не знаю какая у вас html разметка, но наверняка также можно выделить что-то общее и сделать клик именно по нему и найти соответствующий ему b.

Answer 2

$("[id^='p']").click(function () {
  var bId = this.id.replace("p", "b")
  $("# + bIdi).iCheck('uncheck');
});

Answer 3

Привязать селекторы целей к кликабельным элементам:

$("#p1, #p2, #p3").click(function() { 
  var targetSelector = $(this).attr("data-target"); 
  $(targetSelector).iCheck("uncheck"); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<p id="p1" data-target="#b1">p1</p> 
<b id="b1">b1</b> 
<p id="p2" data-target="#b2">p2</p> 
<b id="b2">b2</b> 
<p id="p3" data-target="#b3">p3</p> 
<b id="b3">b3</b>