时间戳

首页 > 解决方案 > 动态解析 jquery 集合值

jquery - 动态解析 jquery 集合值

问题描述

这可能只是获得正确方法来完成工作的一个案例。

我有一个 jQuery 集合，我为每个项目循环遍历它，然后我需要动态附加一个“选项卡”并创建一个click事件处理程序。

但是，我需要从集合中解析一个值并在事件中使用它作为硬编码值。在运行时，集合对象不存在，我的代码返回undefined.

var i = 0;

// Load them with 
$(result).each(function () {
  // Appending the Tab Here                     
  $('#nav-tab').append('<a class="nav-item nav-link" id="nav-contact-tab' + i.toString() + '" data-toggle="tab" role="tab" aria-controls="nav-contact" aria-selected="false">' + this.TAB_CONTENT + '</a>');

  // Some code to execute if we click on the tab
  $('#nav-contact-tab' + i.toString()).click(function() {
    // This is where my problem is: 
    // I need to make the assignment below as a value.
    daTabID = this.TABLE_NAME;
    alert(this.TABLE_NAME);
    LoadReport();
    alert('Report Loaded done');
  });

  i++;

  alert(i);
});

标签： jquery

解决方案

首先请注意，增量id属性是一种反模式，应该避免。其次注意thisin$.each()将引用迭代中的元素，而不是包含TABLE_NAMEandTAB_CONTENT属性的外部范围。

实现您所需的最简单和最干燥的方法是使用通用class属性和data属性来保存有关元素的自定义元数据。然后，您可以使用单个委托事件处理程序，而不是在每个循环中创建一个新事件处理程序。尝试这个：

var $tab = $('#nav-tab').on('click', '.nav-contact-tab', function() {
  var daTabID = $(this).data('table-name');
  console.log(daTabID);
  LoadReport();
});

$(result).each(function() {
  $('#nav-tab').append('<a class="nav-item nav-link nav-contact-tab" data-table-name="' + this.TABLE_NAME + '" data-toggle="tab" role="tab" aria-controls="nav-contact" aria-selected="false">' + this.TAB_CONTENT + '</a>');
});

推荐阅读