Как уменьшить повторяющийся код в jquery?

Question

У меня есть следующий код, который используется для изменения css div на основе того, установлен ли флажок или нет, поэтому у меня есть несколько div с несколькими флажками. У меня также есть флажок, сохраненный в cookie, поэтому у меня есть дополнительный код для обновления div на pageload. Есть ли более эффективный способ сделать это, кроме повторения одного и того же кода каждый раз для каждого индивидуального идентификатора?

Вот пример первых двух блоков обоих разделов моего кода. Оба повторяются с первого до 100 экземпляров в зависимости от количества флажков на странице. Это не огромный файл, но мне кажется, что, вероятно, лучший способ сделать это, о котором я не знаю.

$('#check_1').click(function() { 
    if($('#check_1').is(':checked')) { 
     $('#gs_wrap1').addClass('fade'); 
     $('#collect1').removeClass('notcollected'); 
     $('#collect1').addClass('collected');   
    } else { 
     $('#gs_wrap1').removeClass('fade'); 
     $('#collect1').removeClass('collected'); 
     $('#collect1').addClass('notcollected'); 
    } 
}); 
$('#check_2').click(function() { 
    if($('#check_2').is(':checked')) { 
     $('#gs_wrap2').addClass('fade'); 
     $('#collect2').removeClass('notcollected'); 
     $('#collect2').addClass('collected');   
    } else { 
     $('#gs_wrap2').removeClass('fade'); 
     $('#collect2').removeClass('collected'); 
     $('#collect2').addClass('notcollected'); 
    } 
}); 

if($('#check_1').is(':checked')) { 
    $('#gs_wrap1').addClass('fade'); 
    $('#collect1').removeClass('notcollected'); 
    $('#collect1').addClass('collected'); 
} else { 
    $('#gs_wrap1').removeClass('fade'); 
    $('#collect1').removeClass('collected'); 
    $('#collect1').addClass('notcollected'); 
} 
if($('#check_2').is(':checked')) { 
    $('#gs_wrap2').addClass('fade'); 
    $('#collect2').removeClass('notcollected'); 
    $('#collect2').addClass('collected'); 
} else { 
    $('#gs_wrap2').removeClass('fade'); 
    $('#collect2').removeClass('collected'); 
    $('#collect2').addClass('notcollected'); 
} 

HTML код нижеследовал:

<input class="inputbox" type="checkbox" name="check_1" id="check_1"> 
<label for="check_1"> 
<div class="notcollected" id="collect1"></div> 
<div class="gs_wrap" id="gs_wrap1"> 
<div class="gs_list_headimg"></div> 
<div class="gs_list_description"></div></div></label> 
<input class="inputbox" type="checkbox" name="check_2" id="check_2"> 
<label for="check_2"> 
<div class="notcollected" id="collect2"></div> 
<div class="gs_wrap" id="gs_wrap2"> 
<div class="gs_list_headimg"></div> 
<div class="gs_list_description"></div></div></label> 

Answer 1

Начните с анализа кода. Во-первых, вы делаете что-то вроде:

$('#check_1').click 
$('#check_2').click 
... 
//more check clicks. 

Вы можете просто выбрать все элементы, которые начинаются с check_ и добавить обработчик щелчка на них.

$('[id^="check_"]').click(function(){ 

}); 

Теперь тело ваших обработчиков также очень похоже. Единственное, что меняется, это номер id в конце. Это зависит от количества идентификаторов в конце щелкнул элемент, так что вы можете просто сделать:

$('[id^="check_"]').click(function(){ 
    var id = $(this).prop('id').match(/\d+$/)[0]; //selects numbers at the end. 
    if($('#check_' + id).is(':checked')) { 
     $('#gs_wrap' + id).addClass('fade'); 
     $('#collect' + id).removeClass('notcollected'); 
     $('#collect' + id).addClass('collected');   
    } else { 
     $('#gs_wrap' + id).removeClass('fade'); 
     $('#collect' + id).removeClass('collected'); 
     $('#collect' + id).addClass('notcollected'); 
    } 
}); 

Наконец, все это осталось, чтобы установить начальное состояние, которое имеет такое же тело, как наш обработчик щелчка. Мы могли бы просто абстрактные, что в отдельную функцию:

function addRemoveFade(){ 
    var id = $(this).prop('id').match(/\d+$/)[0]; //selects numbers at the end. 
    if($('#check_' + id).is(':checked')) { 
     $('#gs_wrap' + id).addClass('fade'); 
     $('#collect' + id).removeClass('notcollected'); 
     $('#collect' + id).addClass('collected');   
    } else { 
     $('#gs_wrap' + id).removeClass('fade'); 
     $('#collect' + id).removeClass('collected'); 
     $('#collect' + id).addClass('notcollected'); 
    } 
} 

Но мы просто потеряли контекст, чтобы получить идентификатор, мы должны были бы передать объект JQuery, чтобы получить идентификатор, но так как мы просто заинтересованы в получив идентификатор, мы просто передадим это вместо этого.

function addRemoveFade(id){ 
    if($('#check_' + id).is(':checked')) { 
     $('#gs_wrap' + id).addClass('fade'); 
     $('#collect' + id).removeClass('notcollected'); 
     $('#collect' + id).addClass('collected');   
    } else { 
     $('#gs_wrap' + id).removeClass('fade'); 
     $('#collect' + id).removeClass('collected'); 
     $('#collect' + id).addClass('notcollected'); 
    } 
} 

Теперь мы можем сделать:

function addRemoveFade(id){ 
    if($('#check_' + id).is(':checked')) { 
     $('#gs_wrap' + id).addClass('fade'); 
     $('#collect' + id).removeClass('notcollected'); 
     $('#collect' + id).addClass('collected');   
    } else { 
     $('#gs_wrap' + id).removeClass('fade'); 
     $('#collect' + id).removeClass('collected'); 
     $('#collect' + id).addClass('notcollected'); 
    } 
} 

$('[id^="check_"]').click(function(){ 
    var id = $(this).prop('id').match(/\d+$/)[0]; //selects numbers at the end. 
    addRemoveFade(id);  
}); 

addRemoveFade(1); 
addRemoveFade(2); 

Опять мы в конечном итоге повторяя это для каждого элемента check_ мы имеем. Нам не нужно это делать. Вы можете просто сделать:

function addRemoveFade(id){ 
    if($('#check_' + id).is(':checked')) { 
     $('#gs_wrap' + id).addClass('fade'); 
     $('#collect' + id).removeClass('notcollected'); 
     $('#collect' + id).addClass('collected');   
    } else { 
     $('#gs_wrap' + id).removeClass('fade'); 
     $('#collect' + id).removeClass('collected'); 
     $('#collect' + id).addClass('notcollected'); 
    } 
} 

$('[id^="check_"]').each(function(){ 
    var id = $(this).prop('id').match(/\d+$/)[0]; 
    addRemoveFade(id); 
    $(this).click(function(){ 
     addRemoveFade(id); 
    }); 
}); 

Есть еще некоторые повторенные код вокруг в функции addRemoveFade, и это, вероятно, еще лучше иметь классы вместо всех этих идентификаторов, но вы получите идею сейчас (я надеюсь).

Answer 2

var $check1 = $('#check_1'); 
var $wrap1 = $('#gs_wrap1'); 
var $collect1 = $('#collect1'); 

var $check2 = $('#check_2'); 
var $wrap2 = $('#gs_wrap2'); 
var $collect2 = $('#collect2'); 

$check1.click(function() { 
    handleChecked($check1, $wrap1, $collect1); 
}); 

$check2.click(function() { 
    handleChecked($check2, $wrap2, $collect2); 
}); 

handleChecked($check1, $wrap1, $collect1); 
handleChecked($check2, $wrap2, $collect2); 


function handleChecked($check, $wrap, $collect) { 
    if ($check.is(':checked')) { 
     $wrap.addClass('fade'); 
     $collect.removeClass('notcollected').addClass('collected'); 
    } else { 
     $wrap.removeClass('fade'); 
     $collect.removeClass('collected').addClass('notcollected'); 
    } 
} 

Answer 3

Использование классов (в целом) для выполнения таких вещей гораздо лучше с точки зрения повторного использования кода. Это означает, что он не тесно связан со строгими идентификаторами.

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

$('input[type="checkbox"]').on('click', function(event){ 
    var $this = $(this); 
    if($this.is(':checked')){ 
     enableFade($this); 
    } else { 
     disableFade($this); 
    } 
}); 

function enableFade(el){ 
    el.closest('.gs_wrap').addClass('fade'); 
    el.closest('.collect').removeClass('notcollected').addClass('collected'); 
} 

function disableFade(el){ 
    el.closest('.gs_wrap').removeClass('fade'); 
    el.closest('.collect').removeClass('collected').addClass('notcollected'); 
} 

HTML Поскольку структура не предусмотрена, я предполагаю, что его следующим образом

<div> 
    <div class="gs_wrap"> 
     <div> 
      <input type="checkbox"/> 
     </div> 
     <div class="collect"> 
     </div> 
    </div> 
</div> 
<div> 
    <div class="gs_wrap"> 
     <div> 
      <input type="checkbox"/> 
     </div> 
     <div class="collect"> 
     </div> 
    </div> 
</div> 
<div> 
    <div class="gs_wrap"> 
     <div> 
      <input type="checkbox"/> 
     </div> 
     <div class="collect"> 
     </div> 
    </div> 
</div> 
<!-- And so on -->