Question

我试图表示搜索结果。在某些信息旁边，用户可以单击标题并进入详细信息页面。

var resultDiv = "<div id='results_container'>"; 

    $.each( result, function(i, poi) {
        resultDiv += "<div class=\"result\">";
        resultDiv += "<p class=\"date\">" + "Date: " + poi.date + ", Category: " + poi.category + "</p>";
        resultDiv += "<p class=\"title\"><a id='link' onClick='loadPOI(poi)' href='#markerdetail-page'>" + poi.title + "</a></p>";
        resultDiv += "<p class=\"description\">" + poi.description.substring(0,200) + "</p>";
        resultDiv += "</div>";
    });
    resultDiv += "</div>";

动态创建的HTML代码中的链接始终使用最新元素的参数调用该函数。如何使用当前poi-element的参数调用该函数？

Answer 1

在这种情况下，在迭代中而不是在迭代中实际创建元素会更有意义，这样您就可以正确地引用poi并分配点击事件。

var resultDiv = $("<div id='results_container'>"); 

$.each( result, function(i, poi) {
    var div = $("<div class='result'>");
    div.append("<p class=\"date\">" + "Date: " + poi.date + ", Category: " + poi.category + "</p>");
    div.append("<p class=\"title\"><a id='link' href='#markerdetail-page'>" + poi.title + "</a></p>");
    div.append("<p class=\"description\">" + poi.description.substring(0,200) + "</p>");
    div.find("a").click(function(){
        loadPOI(poi);
    });
    resultDiv.append(div);
});

resultDiv.appendTo("#someel");

Answer 2

您好，如果您想在点击链接时传递POI标题，那么您可以这样做。

var resultDiv =“”;

$.each( result, function(i, poi) {
    resultDiv += "<div class=\"result\">";
    resultDiv += "<p class=\"date\">" + "Date: " + poi.date + ", Category: " + poi.category + "</p>";
    resultDiv += "<p class=\"title\"><a id='link' onClick='loadPOI(this)' href='#markerdetail-page'>" + poi.title + "</a></p>";
    resultDiv += "<p class=\"description\">" + poi.description.substring(0,200) + "</p>";
    resultDiv += "</div>";
});
resultDiv += "</div>";

我已将loadPOI（poi）更改为链接中的loadPOI（this）。这会将当前单击的元素作为对象传递给loadPOI（），以便您可以在loadPOI（）函数中从该对象获取poi标题。

function loadPOI(obj) {
  var title = obj.text();
  console.log(title);
}

我希望这会对你有所帮助。

在js循环中创建调用js函数的HTML-Link

2 个答案: