javascript - jquery 代码的有趣行为

Question

有趣的是，如果我删除 alert(data[i].id) 的注释，代码就会工作。正如在示例中一样，字符串未连接，因此我在选择框中没有选项。提示？帮忙？

重新编辑以便你们可以看到整个方法

function socialbookmarksTableData(data)
{
    var toAppend = '';
    var bookmarkingSites = '';

    $.getJSON("php/socialbookmark-get-bookmarking-sites.php",function(data){

        for(var i = 0; i < data.length; i++){
            //alert( data[i].id);
            bookmarkingSites += '<option value = "' + data[i].id + '">' + data[i].title + '</option>';
        }
    });

    $.each(data.results, function(i, id){

        if(i%2 == 1)
            toAppend += '<tr class="first">';
        else
            toAppend += '<tr class="second">';
        if(data.results[i].status == "PENDING" || data.results[i].status == "POSTED")
            toAppend += '<td><span class="approved">' + data.results[i].status + '</span></td>';
        else
            toAppend += '<td>' + data.results[i].status + '</td>';
        toAppend += '<td><select name="sb2" id="sb2">'+
        '<option value="'+ data.results[i].bookmark +'">' + data.results[i].bookmark +'</option>' +
        bookmarkingSites + '</select></td>';
        toAppend += '<td>' + data.results[i].user + '</td>';
        toAppend += '<td>' + data.results[i].link + '</td>';
        toAppend += '<td>Some Article</td>';
        toAppend += '<td>' + data.results[i].title + '</td>';
        toAppend += '<td>' + data.results[i].description + '</td>';
        toAppend += '<td>' + data.results[i].tags + '</td>';
        toAppend += '<td>' + data.results[i].date + '</td>';
        toAppend += '<td><div class="actions">';
        toAppend += '<ul><li><input class="radio" name="input" type="checkbox" value="' + data.results[i].id + '" /></li>';
        toAppend += '<li><a class="action1" href="#">1</a></li>';
        toAppend += '<li><a class="action4" href="#">4</a></li></ul></div></td></tr>';
    });
    $("#searchTable tbody").append(toAppend);
}

Answer 1

一个是原因:当您将字符串括在单引号中时，您不必对双引号进行转义(我认为反斜杠在这里不起作用，因为转义操作无论如何都在这里进行)。所以这个:

bookmarkingSites += '<option value = \"' + data[i].id + '\">' + data[i].title + '</option>';

应该是:

bookmarkingSites += '<option value="' + data[i].id + '">' + data[i].title + '</option>';

另一个原因:你的代码在<some more code>之间不在回调函数中，但您尝试从函数(data 和 bookmarkingSites)访问数据。将所有 HTML 生成代码放在回调函数中。

---

啊所以它是一个其他数据 ;) 无论如何你不能访问 bookmarkingSites在您的代码中，因为在执行代码时它还不存在。试试这个:

function socialbookmarksTableData(data)
{

    $.getJSON("php/socialbookmark-get-bookmarking-sites.php",function(bookmarks){

        var toAppend = '';
        var bookmarkingSites = '';

        for(var i = 0; i < bookmarks.length; i++){
            //alert( bookmarks[i].id);
            bookmarkingSites += '<option value = "' + bookmarks[i].id + '">' + bookmarks[i].title + '</option>';
        }

        $.each(data.results, function(i, id){

            if(i%2 == 1)
                toAppend += '<tr class="first">';
            else
                toAppend += '<tr class="second">';
            if(data.results[i].status == "PENDING" || data.results[i].status == "POSTED")
                toAppend += '<td><span class="approved">' + data.results[i].status + '</span></td>';
            else
                toAppend += '<td>' + data.results[i].status + '</td>';
            toAppend += '<td><select name="sb2" id="sb2">'+
            '<option value="'+ data.results[i].bookmark +'">' + data.results[i].bookmark +'</option>' +
            bookmarkingSites + '</select></td>';
            toAppend += '<td>' + data.results[i].user + '</td>';
            toAppend += '<td>' + data.results[i].link + '</td>';
            toAppend += '<td>Some Article</td>';
            toAppend += '<td>' + data.results[i].title + '</td>';
            toAppend += '<td>' + data.results[i].description + '</td>';
            toAppend += '<td>' + data.results[i].tags + '</td>';
            toAppend += '<td>' + data.results[i].date + '</td>';
            toAppend += '<td><div class="actions">';
            toAppend += '<ul><li><input class="radio" name="input" type="checkbox" value="' + data.results[i].id + '" /></li>';
            toAppend += '<li><a class="action1" href="#">1</a></li>';
            toAppend += '<li><a class="action4" href="#">4</a></li></ul></div></td></tr>';
        });
        $("#searchTable tbody").append(toAppend);
    });
}