Зациклить код javasccript

Question

Привет, есть код:

$('#k0').click(function(){var z0=$('#c0').val();if ($("#c0:checked").length == 0) {$('#c0').prop("checked", true);var a=z0;$("#k0").css({'opacity':'0.1'});} else {var a="off";$('#c0').prop("checked", false);$("#k0").css({'opacity':'1'});}});
$('#k1').click(function(){var z1=$('#c1').val();if ($("#c1:checked").length == 0) {$('#c1').prop("checked", true);var a=z1;$("#k1").css({'opacity':'0.1'});} else {var a="off";$('#c1').prop("checked", false);$("#k1").css({'opacity':'1'});}});
$('#k2').click(function(){var z2=$('#c2').val();if ($("#c2:checked").length == 0) {$('#c2').prop("checked", true);var a=z2;$("#k2").css({'opacity':'0.1'});} else {var a="off";$('#c2').prop("checked", false);$("#k2").css({'opacity':'1'});}});
$('#k3').click(function(){var z3=$('#c3').val();if ($("#c3:checked").length == 0) {$('#c3').prop("checked", true);var a=z3;$("#k3").css({'opacity':'0.1'});} else {var a="off";$('#c3').prop("checked", false);$("#k3").css({'opacity':'1'});}});
$('#k4').click(function(){var z4=$('#c4').val();if ($("#c4:checked").length == 0) {$('#c4').prop("checked", true);var a=z4;$("#k4").css({'opacity':'0.1'});} else {var a="off";$('#c4').prop("checked", false);$("#k4").css({'opacity':'1'});}});

Пробовал его укоротить... Что-то не получается.. Подскажте где ошибка?

var i = 0;
while (i < 4) {
$('#k' + i).click(function(){
    var 'z' + i = $('#c' + i).val();
    if ($("#c" + i + ":checked").length == 0) {
        $('#c' + i).prop("checked", true);
        var a = 'z' + i;
        $("#k" + i).css({'opacity':'0.1'});
    } else {
        var a = "off";
        $('#c' + i).prop("checked", false);
        $("#k" + i).css({'opacity':'1'});
    }
});
i++;
}

И можно ли сокртить такое?

if ($('form input:checked#c0').val()) {
cards["0"] = 'on';
}

if ($('form input:checked#c1').val()) {
cards["1"] = 'on';
}

if ($('form input:checked#c2').val()) {
cards["2"] = 'on';
}

if ($('form input:checked#c3').val()) {
cards["3"] = 'on';
}

if ($('form input:checked#c4').val()) {
 cards["4"] = 'on';
}

Если вы вызываете один и тот же обработчик для разных элементов, пора задуматься о том, чтобы добавить к этим элементом имя класса и выбирать эти элементы по классу. — tutankhamun, Dec 01 '15 at 19:57

score 1 · Accepted Answer · edited Apr 13 '17 at 12:53

Если присмотреться, функции практически ничем не отличаются, кроме значения id, которое можно взять из элемента по которому кликнули. Плюсом объявлено несколько переменных, значения которых нигде не используются.

$('#k1').click(function() {
  var z1 = $('#c1').val(); // не используется
  if ($("#c1:checked").length == 0) {
    $('#c1').prop("checked", true);
    var a = z1;// не используется
    $("#k1").css({
      'opacity': '0.1'
    });
  } else {
    var a = "off"; // не используется
    $('#c1').prop("checked", false);
    $("#k1").css({
      'opacity': '1'
    });
  }
});

Ошибка вашего подхода в том, что функции создаваемые во время цикла - захватывают переменную i - значение которой будет проверять только во время выполнения функции. Дли исправления можно применять IIFE(самовызывающиеся функциональные выражения)

Но, так как навешивание обработчиков событий в jQuery может применяться к нескольким выбранным элементам (цикл уже есть внутри), то достаточно собрать нужные id в селектор и добавить к нему обработчик click.

В итоге все можно сократить до

$('#k0,#k1,#k2,#k3,#k4').click(function() {
  var $this = $(this),
      id = $this.attr('id'), // #k0..5
      idNum = id.replace(/\D/g,''), //0..5
      $c = $('#c'+id),
      $k = $('#k'+id);

  $c.prop('checked', !$c.prop('checked'));
  $k.css({
      'opacity': $c.prop('checked') ? '0.1' : '1'
    });
});

При этом динамически собирать нужно/можно только селектор:

'#k0,#k1,#k2,#k3,#k4'

например:

new Array(5).join().split(',').map(function(_, index){ 
    return '#k'+index
}).join(); // "#k0,#k1,#k2,#k3,#k4"

По поводу кода

if ($('form input:checked#c0').val()) {
    cards["0"] = 'on';
}

if ($('form input:checked#c1').val()) {
    cards["1"] = 'on';
}

if ($('form input:checked#c2').val()) {
    cards["2"] = 'on';
}

if ($('form input:checked#c3').val()) {
    cards["3"] = 'on';
}

if ($('form input:checked#c4').val()) {
    cards["4"] = 'on';
}

Конечно это можно сократить, так как опять используется повтор кода

$('form input:checked').each(function(){ //бежим в цикле по выбранным чекбоксам
    var $this = $(this),//получаем jQuery объект для текущего проверяемого элемента    
        id = $this.attr('id').replace(/\D/g,'');// получаем цифры из id
    if($this.val()){ //проверяем значение
        cards[id] = 'on'; // выставляем нужный элемент в массиве
    }
});

Спасибо. Второй код использовал. Трудновато для моего понимания пока что javascript — Алекс, Dec 02 '15 at 18:43
@Алекс, второй это какой? :) Трудновато для моего понимания пока что javascript - а я-то думал что подробно расписал. — Grundy, Dec 02 '15 at 18:45

Зациклить код javasccript

1 Answers1