Передача функции во время выполнения цикла

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

Я бы рекомендовал создать HTML, используя jQuery() и использовать .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>

Answer 2

Вы можете захотеть сделать что-то вроде этого (вы можете изменить функции курсора к нормальным, если это это проблема):

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. 
     } 
    } 
}); 

Plain Javascript. Нет jQuery дерьма.