Question

有人可以向我解释如何将link从JSON文件附加到a href？我可以抓住图像，但我不知道如何获取链接。

这是我正在使用的代码

<body style="background: #e5e5e5">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <a href="">
                        <div class="cover" id="img"></div>
                    </a>
                </div>
            </div>
        </div>
        <script>
        var data = {
            "info": [{
                "cover": "highlighted/1.gif",
                "link":"http://google.com"
            },
            {
                "cover": "highlighted/1.gif",
                "link":"http://google.com"
            }]
        };
        data.info.forEach( function(obj) {
            var img = new Image();
            img.src = obj.cover;
            document.getElementById("img").appendChild(img);
        });
        </script>
    </body>

Answer 1

I guess you are after this?

All you need to do is:

Create a link element and assign href to it
Create an img element and assign src to it
Append img element to the link element
Append link to the target div

var data = {
    "info": [{
        "cover": "highlighted/1.gif",
        "link":"http://google.co.uk"
    },{
        "cover": "highlighted/2.gif",
        "link":"http://google.com"
    }]
};
data.info.forEach(function(obj) {
    
    var link = document.createElement("a");
    link.href = obj.link;
    
    var img = document.createElement("img");
    img.src = obj.cover;
    
    link.appendChild(img);
    document.getElementById("img").appendChild(link);
});

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="cover" id="img"></div>
        </div>
    </div>
</div>

Note: Manipulating DOM within a loop is not a good practice when the manupulation is massive. In this case, you could make use of DOM DocumentFragments like below.

var fragment = document.createDocumentFragment();

data.info.forEach(function(obj) {    
    var link = document.createElement("a");
    link.href = obj.link;
    var img = document.createElement("img");
    img.src = obj.cover;
    link.appendChild(img);
    fragment.appendChild(link);
});
//Append outside the loop all at once.
document.getElementById("img").appendChild(fragment);

Answer 2

Note: <a> is an inline element, you should put it in the div.

Here is a working code:

<body style="background: #e5e5e5">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="cover" id="img">
                </div>
            </div>
        </div>
    </div>
    <script>
    var data = {
        "info": [{
            "cover": "highlighted/1.gif",
        "link":"http://google.com/1"
        },
        {
            "cover": "highlighted/2.gif",
        "link":"http://google.com/2"
        }]
    };
    var imagesBlock = document.getElementById("img");
    data.info.forEach( function(obj) {
        var img = new Image();
        img.src = obj.cover;
        var a = document.createElement('a');
        a.setAttribute('href', obj.link);
        a.appendChild(img);
        imagesBlock.appendChild(a);

    });
    </script>
</body>

Here is another version, where we clone a DOM tree instead,, following discussion (see below):

<body style="background: #e5e5e5">
    <div class="container">
        <div class="row" id="repeatingImages">
            <div class="col-sm-4">
                <div class="cover">
                    <a><img /></a>
                </div>
            </div>
        </div>
    </div>
    <script>
    var data = {
        "info": [{
            "cover": "highlighted/1.gif",
        "link":"http://google.com/1"
        },
        {
            "cover": "highlighted/2.gif",
        "link":"http://google.com/2"
        }]
    };

    var repeatingImages = document.getElementById("repeatingImages");

    // get the template block, clone and remove the source
    var blockTemplate = repeatingImages.getElementsByTagName("div")[0].cloneNode(true);
    repeatingImages.getElementsByTagName("div")[0].remove();

    data.info.forEach( function(obj) {
        block = blockTemplate.cloneNode(true);
        block.getElementsByTagName("a")[0].setAttribute('href', obj.link);
        block.getElementsByTagName("img")[0].setAttribute('src', obj.cover);
        repeatingImages.appendChild(block);

    });
    </script>
</body>

Answer 3

使用.each（）

$.each(data.info, function(i, val) {
      var src = val.cover;
      var link = val.link;
      $('a').attr('href', link)
});

Answer 4

使用attr()功能分配href属性：

 $('#anchor').attr('href', obj.link);

如果你想追加一个新元素（#holder是新元素将被追加的元素）：

$('#holder').append('<a href="' + obj.link + '">LinkText</a>');

从JSON追加到href的链接

4 个答案: