javascript - 为数据库查询结果的每个结果动态创建唯一的链接或按钮

Question

基本上，数据库查询的结果列表被插入到 ul 中。我希望用户能够单击他们正在查找的结果，然后发生以下两种情况之一:

• 使用 ID 创建唯一链接(例如 php GET 请求) 所选结果
• 通过 onClick 调用 JS 函数 属性，并将点击结果的 ID 作为参数发送。

下面的代码是我到目前为止所做的 - 减去上面列出的功能。 HTML 中的列表:

    <ul data-role="listview" id="treesUL" data-inset="true" style="visibility: hidden">
            <li id="treesLI">
                <div class="resultNames">
                    <span class="donorName">Donor</span>
                    for
                    <span class="honoreeName">Honoree</span>
                </div>

                <div class="resultInfo">
                    <span class="treeName">common</span>
                    on: 
                    <span class="donationDate">Date</span>
                </div>

                <div class="resultDedication">
                    <span class="dedicationText">Dedication</span>
                </div>
            </li>
        </ul>

根据存储在 myTrees 数组中的查询结果编辑列表的 javascript。该函数通过 XMLHttpRequest 对象调用。

function showTreeContent()
{
if (requestObj.readyState == 4) //Request completed
{
    //Retrieve the JSON encoded array, which is stored at index-key: media
    var text = requestObj.responseText;
    //alert(text);
    var myTrees = jQuery.parseJSON(text).media; 
    $('#treesUL').text('');

    //Alert the number of rows, for testing purposes
    alert(myTrees.length + " results.");

    //Loop through the JSON array, and add each element to a <li>, which is then added to the <ul>
    for(var i = 0; i < myTrees.length; i++)
    {
        var tree = myTrees[i];
        var li =$('#treesLI').clone();
        li.removeAttr('id');
        li.appendTo('#treesUL');

        //li.find('.treeLink').setAttribute("href", "somelink url");
        li.find('.donorName').text(tree['donor']);
        li.find('.honoreeName').text(tree['honoree']);
        li.find('.dedicationText').text("'" + tree['dedication'] + "'");

        if (tree['common'] != '')
            li.find('.treeName').text(tree['common']);
        else
            li.find('.treeName').text("Unknown Species");


        li.find('.donationDate').text(tree['date']);
        li.data('treeID','tree'+i);         
    }       
}
}

我尝试用 a 标签包围 li 标签的内容，然后编辑 a 标签的 href，但我无法使其工作。我也在这个项目中使用 jQuery Mobile。如果您需要更多信息，请告诉我 - 非常感谢任何帮助!

Answer 1

我觉得奇怪的第一件事是你调用 $('#treesUL').text('');删除 ul 的内容并比在您请求的循环中 $('#treesLI')上面已删除。

我要做的是将 HTML 创建为字符串并将其附加到 ul。

示例。

var html = '';

for(var i = 0, length = myTrees.length; i < length; ++i)
{
    var tree = myTrees[i];
    html += '<li class="treesLI" onClick="somefunction('+ tree.id+')">';
    html += '<div class="resultNames"><span class="donorName">' + tree.donor + '</span>';
    html += 'for <span class="honoreeName">'+ tree.honoree + '</span></div>';
    html +='</li>';
    $('#treesUL').append(html);
}

如您所见，我添加了一个 onClick 处理程序，该处理程序调用接收参数的函数。 您可以使用该 onClick 函数通过 $.axaj() 发出 GET 请求

如果你不想使用 onClick 你可以这样做:

$('#treesUL li').click(function(event){

});

其他一些观察结果:

• 您可以使用 . 访问对象的属性像这样tree.dedication .
• 你应该这样做 for(var i = 0, length = myTrees.length; i < length; ++i) 在 IE8 中速度提高了 2 倍