Question

我开始使用html5并且不确定我在这里做错了什么。

我想要实现的是创建一个项目组合，当选择一个项目时，将所选项目传递给一个函数来处理它。

我在这里设置了一个简单的jsfiddle https://jsfiddle.net/rohannayak90/9u9rtf84/

data = JSON.parse('{"error":false,"items":[{"id":1,"name":"John"},{"id":2,"name":"Jordan"}]}');

jQuery.each(data.items, function(counter, item) {
  //console.log(item);
  h = '<a href="#" onclick="' + generateCallBack(item) + ';">' + item.name + '</a></br>';
  $('#portfolio').append(h);
});

function generateCallBack(argItem) {
    return function() {
      itemSelected(argItem);
    };
};

function itemSelected(argItem) {
  //console.log(argItem.name);
  alert(argItem.name);
};

提前致谢。

Answer 1

您可能想要做这样的事情（如果这是一个问题，您可以将箭头功能更改为正常功能）：

const data = JSON.parse('{"error":false,"items":[{"id":1,"name":"John"},{"id":2,"name":"Jordan"}]}');
const array = data.items;
const length = array.length;

let string = '';
data.items.map(item => {
    string += '<a href="#">' + item.name + '</a></br>';
});

const portfolio = document.getElementById('portfolio');
portfolio.innerHTML += string;

portfolio.addEventListener('click', function(event) {
    if(event.target.tagName !== 'A') return;

    let i = -1;
    while(++i < length) {
        if(array[i].name === event.target.textContent) {
            return alert(JSON.stringify(array[i].name)); // return ends the function and thus the loop too.
        }
    }
});

普通的Javascript。没有jQuery废话。

Answer 2

我建议使用jQuery()创建HTML，并使用.data(key, value)与元素存储任意值。

另外，在动态生成元素时，使用Event Delegation委托事件方法了解.on()。

一般语法

$(staticParentContainer).on('event','selector',callback_function)

解决方案的片段

$(function() {
  var data = JSON.parse('{"error":false,"items":[{"id":1,"name":"John"},{"id":2,"name":"Jordan"}]}');

  jQuery.each(data.items, function(counter, item) {
    //console.log(item);
    $('<a />', {
        href: '#',
        text: item.name,
        'class': 'myClass'
      })
      .data('item', item)
      .add('<br />')
      .appendTo('#portfolio');
  });

  $('#portfolio').on('click', 'a.myClass', function() {
    console.log($(this).data('item'));
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showcase" class="container">
  <ul id="portfolio" class="grid">

  </ul>
</div>

运行循环时传递函数

2 个答案: