jQuery getJSON 结果 - 尝试从结果创建文本 <a> 链接但只在 return 中获取 [objectObject] - 它适用于图像 <a>

Question

我通过 jQuery getJSON 从 flickr API 获取结果，一切正常。我在图像周围设置了 <a>锚点，这些渲染效果很好。

但是，我似乎无法使用在结果周围环绕锚点的相同方法获得标准文本 <a> 链接。我得到的只是 [objectObject].

我正在通过 append/appendTo 构建一个结果块，它可以正常工作。我尝试了 2 种构建文本 <a> 链接的方法：

使用 html/href-attr 创建变量 - 在适当的 DOM 元素中引用此变量
使用 html/href-attr 创建变量 - 动态地 appendTo 此变量到适当的 DOM 元素

方法 1 导致 [objectObject] - 方法 2 实际上插入了链接，但在 .each() 循环的每个循环中重复递减的链接数量，但最后一个元素的输出为零. （我以注释掉的形式包含了方法 2）。

所以我觉得方法 1 是正确的方向 - 它呈现正确，但它需要实际链接而不是对象引用。

有人可以在这里指点一下吗？？？非常感谢。

这是有效的 CodePen link，这是代码：

<div class="container">
    <div class="row">
        <div id="block" class="col-sm-12"></div>
    </div>
</div>

.img-thumbnail{ max-height: 100px; }

(function() {

    var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

    $.getJSON( flickerAPI, {
        tags: "kittens",
        tagmode: "all",
        format: "json"
    }).done(function( data ) {

        $.each( data.items, function( i, item ) {

            // block shell:
            var Outer = $('<div class="col-sm-12">');
            var Inner = $('<div class="row">').appendTo(Outer);

            // image/anchor/element:
            var Img = $('<img class="img-fluid img-thumbnail">').attr('src', item.media.m);
            var ImgAnchor = $('<a>').attr('href', item.link).append(Img);
            var ImgDiv = $('<div class="col-sm-3">').append(ImgAnchor);
            ImgDiv.appendTo(Inner);

            // item links:
            var AuthorText = ("Author...");
            var AuthorAnchor = $('<a>').attr('href', item.author).append(AuthorText);
            // var AuthorAnchor = $('<a>').attr('href', item.author).append(AuthorText).appendTo('.author-wrap');

            var LinkText = ("Item...");
            var LinkAnchor = $('<a>').attr('href', item.link).append(LinkText);
            // var LinkAnchor = $('<a>').attr('href', item.link).append(LinkText).appendTo('.link-wrap');

            // build element:
            var CopyDiv = $(
                '<div class="col-sm-9">' + 
                    '<div class="row">' +
                        '<div class="col-sm-3">' + AuthorAnchor + '</div>' +
                        // '<div class="col-sm-3 author-wrap">' + '</div>' +
                        '<div class="col-sm-3">' + item.published + '</div>' +
                        '<div class="col-sm-3">' + LinkAnchor + '</div>' +
                        // '<div class="col-sm-3 link-wrap">' + '</div>' +
                    '</div>' + 
                '</div>');

            // append element to Inner:
            CopyDiv.appendTo(Inner);

            // append Outer to block:
            Outer.appendTo('#block');

            // limit output
            if ( i === 4 ) {return false;}

            // log the json data
            console.log(data);

        });

    });

})();

Answer 1

你的问题是你的这部分代码：

        // build element:
        var CopyDiv = $(
            '<div class="col-sm-9">' + 
                '<div class="row">' +
                    '<div class="col-sm-3">' + AuthorAnchor + '</div>' +
                    // '<div class="col-sm-3 author-wrap">' + '</div>' +
                    '<div class="col-sm-3">' + item.published + '</div>' +
                    '<div class="col-sm-3">' + LinkAnchor + '</div>' +
                    // '<div class="col-sm-3 link-wrap">' + '</div>' +
                '</div>' + 
            '</div>');

您不能以这种方式附加元素，因为这只是普通的字符串连接，这意味着 toString() 方法在 AuthorAnchor 和 LinkAnchor 上隐式调用，因为它们是对象.

这部分代码需要看起来像这样：

        var authorCol = $('<div class="col-sm-3"></div>');
        authorCol.append(AuthorAnchor);

        var linkCol = $('<div class="col-sm-3"></div>');
        linkCol.append(LinkAnchor);

        var row = $('<div class="row"></div>');
        row.append(authorCol);
        row.append('<div class="col-sm-3">' + item.published + '</div>');
        row.append(linkCol);

        var CopyDiv = $('<div class="col-sm-9"></div>');
        CopyDiv.append(row);

注意：通过链接方法调用，我建议的代码可以变得不那么冗长，我这样写是为了让它更容易理解。

另一种解决方案是将 AuthorAnchor 和 LinkAnchor 创建为 HTML 字符串而不是 DOM 节点，这样字符串连接就可以正常工作了。请记住，只有在您使用 jQuery 或其他类似的 DOM 操作工具时才建议这样做。

jQuery getJSON 结果 - 尝试从结果创建文本 <a> 链接但只在 return 中获取 [objectObject] - 它适用于图像 <a>

jQuery getJSON results - trying to create text <a> links from results but only getting [objectObject] in return - it works fine with image <a>

html

javascript

api

jquery

getjson