jQuery, ассоциативный массив и события привязки

Question

Я бы хотел привязать одно и то же событие к 3 флажкам, но каждый раз с другой целью:

  var checkboxes = {
    'selector1' : 'target1',
    'selector2' : 'target2',
    'selector3' : 'target3',
  };

  for (selector in checkboxes) {
    var target = checkboxes[selector];

    if (jQuery(selector).is(':checked')) {
      jQuery(target).show();
    }
    else {
      jQuery(target).hide();
    }

    jQuery(selector).bind('change', function() {
      if ($(this).is(':checked')) {
        jQuery(target).show();
      }
      else {
        jQuery(target).hide();
      }
    });
  };

Но это не работает: при «изменении» 3 селектора показывают / скрывают3-я цель.

Answer 1

Это потому, что код в обработчике событий будет использовать переменную target, а не значение переменной, как это было при создании обработчика событий.При запуске обработчика событий переменная будет содержать последнее значение, используемое в цикле.

Используйте анонимную функцию для создания замыкания, которое фиксирует значение переменной:

for (selector in checkboxes) {
  var target = checkboxes[selector];

  if (jQuery(selector).is(':checked')) {
    jQuery(target).show();
  } else {
    jQuery(target).hide();
  }

  (function(target){

    jQuery(selector).bind('change', function() {
      if ($(this).is(':checked')) {
        jQuery(target).show();
      } else {
        jQuery(target).hide();
      }
    });

  })(target);

};

Примечание: вы можете использовать метод toggle, чтобы упростить код:

for (selector in checkboxes) {
  var target = checkboxes[selector];

  jQuery(target).toggle(jQuery(selector).is(':checked'));

  (function(target){

    jQuery(selector).bind('change', function() {
      jQuery(target).toggle($(this).is(':checked'));
    });

  })(target);

};

Answer 2

Не работает, потому что target не ограничен внутри функции. Блоки НЕ предоставляют область видимости в JavaScript.

Но я уменьшил это для вас, и, надеюсь, это сработает:

$.each(checkboxes, function(selector, target) {
   $(selector).change(function () {
       $(target).toggle($(selector).is(':checked'));
   }).trigger('change');
});

Answer 3

target область действия - это проблема!

Вы могли бы иметь более простой код:

• использовать данные для обработчика

• использовать .toggle(condition)

  $.each(checkboxes, function(selector, target) {
      $(selector).on('change', {target:target}, function (evt) {
          $(evt.data.target).toggle($(this).is(':checked'));
      }).change();
  });