Question

这可能只是采取正确方法完成工作的一种情况。

我有一个jQuery集合，正在为每个项目遍历它，然后，我需要动态附加一个“制表符”并创建一个import React, { Component } from 'react'; import styled from 'styled-components'; const uuidv1 = require('uuid/v1'); class HelperDistance extends Component { constructor(props) { super(props); this.state = { key: uuidv1(), }; } componentDidMount() { this.handleOnChange(); } componentDidUpdate(prevProps, prevState, snapshot) { this.handleOnChange(); } handleOnChange() { let position = document.getElementById(this.state.key).getBoundingClientRect(); this.props.onChange(position); } render() { return ( <Line id={this.state.key} key={this.state.key} position={this.props.position} degree={this.props.degree} /> ); } } export default HelperDistance;事件处理程序。

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

undefined

Answer 1

首先请注意，递增的id属性是一种反模式，应避免使用。其次，请注意，this中的$.each()是指迭代中的元素，而不是包含TABLE_NAME和TAB_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>');
});

动态解析jQuery集合值

1 个答案: