ループ実行中に関数を渡す

Question

私はhtml5で始まりますが、ここで何か間違っているのかどうかはわかりません。

私が達成しようとしているのは、アイテムのポートフォリオを作成し、それが選択されたときに、選択したアイテムを処理する関数に渡します。

私は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); 
}; 

事前のおかげで、ここで簡単なjsfiddleを入れています。

Answer 1

jQuery()を使用してHTMLを作成し、要素に任意の値を格納するのに.data(key, value)を使用することをお勧めします。

さらに、.on() delegated-eventsアプローチを使用して、要素を動的に生成すると、Event Delegationを学習します。あなたはこのような何かをしたい場合がありますあなたのソリューション

$(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

ため

一般的な構文

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

スニペット（あなたがいる場合、通常のものに矢印の機能を変更することができますそれは問題です）：

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のごみはありません。