Question

将同一事件触发行为分配给多个元素的好方法是时间

目前我只是复制这样的代码，但这显然不是最佳的

  $('.recipient #shipment_recipient_attributes_country_code').changeOrDelayedKey(function(e) {
    cargoflux.resetCarrierProductPriceFields();
    cargoflux.getAvailableCarrierProducts();
  }, 1000, 'keyup');

  $('#shipment_recipient_attributes_zip_code').changeOrDelayedKey(function(e) {
    cargoflux.resetCarrierProductPriceFields();
    cargoflux.getAvailableCarrierProducts();
    console.log('recp zip code')
  }, 2000, 'keyup');

  $('.sender #shipment_sender_attributes_country_code').changeOrDelayedKey(function(e) {
    cargoflux.resetCarrierProductPriceFields();
    cargoflux.getAvailableCarrierProducts();
  }, 1000, 'keyup');

  $('#shipment_sender_attributes_zip_code').changeOrDelayedKey(function(e) {
    cargoflux.resetCarrierProductPriceFields();
    cargoflux.getAvailableCarrierProducts();
  }, 2000, 'keyup');

有什么建议吗？

Answer 1

您可以为所有元素添加一个类，并为延迟添加data-delay属性，然后将事件应用于每个元素：

标记：

<input class="someClass" id="some_id" data-delay="2000" ... />

jQuery：

$(".someClass").each(function() {
    var $this = $(this);
    $this.changeOrDelayedKey(function(e) {
      cargoflux.resetCarrierProductPriceFields();
      cargoflux.getAvailableCarrierProducts();
    }, $this.data('delay'), 'keyup');
});

Answer 2

如果您可以更改HTML，则为每个相关元素添加一个公共类，并且由于您有不同的数据要求（时间不同），您可以迭代它们并使用data-属性来保持延迟：< / p>

  $('.someclass').each(function(){
     $(this).changeOrDelayedKey(function(e) {
        cargoflux.resetCarrierProductPriceFields();
        cargoflux.getAvailableCarrierProducts();
  }, $(this).data('delay'), 'keyup');

元素将添加data-delay="1000"或data-delay="2000"（以及您选择的类）。

另一种方法是，如果您有固定时间组，则应将不同的类应用于不同的时间要求并共享一个功能：

e.g。

  function reset() {
        cargoflux.resetCarrierProductPriceFields();
        cargoflux.getAvailableCarrierProducts();
  }

  $('.someclass1000').changeOrDelayedKey(reset, 1000, 'keyup');
  $('.someclass2000').changeOrDelayedKey(reset, 2000, 'keyup');

然后，您只需添加class="someclass1000"或class="someclass2000"即可获得所需效果。

注意：由于您有ID搜索，并且ID在页面上必须是唯一的，因此前面的.recipient对搜索查询没有影响（除了减慢搜索速度）。

在分配事件时避免代码重复

2 个答案: