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倍

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

1 个答案: