Question

我创建了一个图库，可以从API（picsum.photos）中随机提取图片在此处查看：https://codepen.io/lucas-knm/pen/oVmmEV

问题是这两个链接不可单击。我需要用文本或图标更改它们，并将它们链接到新页面中的实际地址。

我尝试了以下代码，但显然不起作用：

这是完整的Js代码：

window.onload = init;
function init(){

        var xhr = new XMLHttpRequest();

        xhr.open("GET", "https://picsum.photos/list", true);

        xhr.send(null);

        xhr.onload = function(){

                if (xhr.status == 200) {
                    var picsum = JSON.parse(xhr.responseText)
                    console.log(picsum);

                var imageString = "";
                    for(var x = 500; x <510; x++){
                    imageString +=  "<div class = imgContainer>" + "<p class = author>" + 
                    picsum[x].author
                    + 
                    "</p>"
                    + 
                    "<img src= 'https://picsum.photos/200/300?image='>"
                    + 
                    "<p class = authorUrl>" 
                    + 
                    picsum[x].author_url
                    + 
                    "</p><p class = postUrl>"
                    + 
                    picsum[x].post_url
                    + 
                    "</p>"  
                    +
                    "</div>"    
                                    }
                document.getElementById("gallery").innerHTML = imageString;
                gallery.setAttribute('style', 'font-size: 12px; text-align: left; display:absolute;');

        }

    }
}

Answer 1

您不必创建文本格式的URL，而必须创建<a>标签并将URL设置为它们的href属性：

window.onload = init;
function init(){

    var xhr = new XMLHttpRequest();

    xhr.open("GET", "https://picsum.photos/list", true);

    xhr.send(null);

    xhr.onload = function(){

            if (xhr.status == 200) {
                var picsum = JSON.parse(xhr.responseText)
                console.log(picsum);

            var imageString = "";
                for(var x = 500; x <510; x++){
                imageString +=  "<div class = imgContainer>" + "<p class = author>" + 
                picsum[x].author
                + 
                "</p>"
                + 
                "<img src= 'https://picsum.photos/200/300?image='>"
                + 
                "<p class = authorUrl>" 
                + 
                //This is what you need:
                "<a href='" + picsum[x].author_url + "'>"+ picsum[x].author_url +"</a>";
                + 
                "</p><p class = postUrl>"
                + 
                "<a href='" +  picsum[x].post_url + "'>"+  picsum[x].post_url +"</a>"

                + 
                "</p>"  
                +
                "</div>"    
                                }
            document.getElementById("gallery").innerHTML = imageString;
            gallery.setAttribute('style', 'font-size: 12px; text-align: left; display:absolute;');

    }

}
}

Answer 2

只需将链接包装在<a>标记中即可：

window.onload = init;
function init() {
  var xhr = new XMLHttpRequest();

  xhr.open("GET", "https://picsum.photos/list", true);

  xhr.send(null);

  xhr.onload = function() {
    if (xhr.status == 200) {
      var picsum = JSON.parse(xhr.responseText);
      console.log(picsum);

      var imageString = "";
      for (var x = 500; x < 510; x++) {
        imageString +=
          "<div class = 'imgContainer'>" +
          "<p class = 'author'>" +
          picsum[x].author +
          "</p>" +
          "<img src= 'https://picsum.photos/200/300?image='>" +
          "<p class = 'authorUrl'><a href=" +
          picsum[x].author_url +
          " target='_blank'>" +
          picsum[x].author_url +
          "</a></p><p class = 'postUrl'><a href=" +
          picsum[x].post_url +
          " target='_blank'>" +
          picsum[x].post_url +
          "</p>" +
          "</div>";
      }
      document.getElementById("gallery").innerHTML = imageString;
      gallery.setAttribute(
        "style",
        "font-size: 12px; text-align: left; display:absolute;"
      );
    }
  };
}

Codepen

如何添加指向API结果的链接

2 个答案: