Question

我正在尝试使用mansory.js创建类似网页的pinterest，并且我无法将唯一描述附加到每个图像。我知道我的代码的最后一行是错误的，但我不知道如何解决它。我基本上将所有描述标签添加到每个图像的一个范围内。

我已尝试查看其他几个stackoverflow问题，例如jQuery: Add element after another element和add image/s inside a div with jquery 但没有运气。

HTML

<body>
    <h1>Camper Stories</h1>
    <div id="content"></div>
</body>

CSS

h1{
    text-align:center;
    font-family: 'Lobster', cursive; font-size:80px;
    color:purple;
}

#content {
    width: auto;
    margin: 0 auto;
}

.item {
     display: inline-block;
     float: left;
     width: 300px;
     height:300px;
     margin: 2em;
     position:relative;
}

.item img {
    width: 300px;
    height: auto;
}

JS

var url = 'http://www.freecodecamp.com/stories/hotStories';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var i;
    var headlines = [];
    //loop through json get need attributes
    //for(i = 0; i < arr.length; i++){
    for (i = 0; i < 5; i++) {
        var headline = arr[i].headline;
        headlines.push(headline);
        var authorImg = arr[i].author.picture;
        //console.log(img);
        //error function
        //if there is no thumbnail link the get author image
        if (img === "") {
            $('#content').append('<div class="item">' + '<a href="' + link + '">' + '<img id="myImg"  src="' + authorImg + '" alt="' + headline + '"    />' + '</a>' + '</div>');
        } else {
            //if there is a thumbnail image then use that image
            $('#content').append('<div class="item" id="hi">' + '<a href="' + link + '">' + '<img id="myImg"  src="' + img + '" alt="' + headline + '"    />' + '</a>' + '</div>');
            //if there is a 404 error with loading the thumbnail image then use author's image
            $('img').one('error', function () {
                this.src = '' + authorImg;
            })
        }
        $(arr[i].headline).insertAfter("img");
    }
}

Answer 1

请参阅http://codepen.io/anon/pen/YXJvEK这是什么意思？仅在相应图像后附加标题？

$("<span>" + arr[i].headline+"</span>").insertAfter($("img").eq(i));

Answer 2

你应该像这样构建你的元素：

var wrapper = $("<div />");
var link = $("<href />");
var img = $("<img />");
...

然后添加所需的属性和类，并将它们相互附加。

link.append(img);
wrapper.append(link);
...

通过这种方式，您的代码可以更加可维护，并且您可以轻松地将您的跨度附加到您的img（不知道您想要描述的确切位置）。

编辑，因为我已经掌握了电脑，这是您可以使用的代码。

function myFunc (data) {
  if(typeof data === "undefined") return; // output some error
  for (var i = 0; i < data.length; i++) {
    var item = data[i];
    var upVote = item.rank;
    var href = item.link;
    var image = (item.image === "") ? item.author.picture : item.image;
    var headline = item.headline;

    // build elements
    var wrapper = $("<div />");
    var link = $("<a />");
    var img = $("<img />");
    var description = $("<span />");

    // add attributes and classes
    wrapper.addClass("item");
    link.attr("href", link);
    // you can also set multiple attributes at once
    img.attr({"src": image, "alt": headline}); 
    description.text(headline); // text(string) adds string to element

    // append elements onto each other
    link.append(img);
    wrapper.append(link, description);

    $("div.content").append(wrapper); // attach elements to DOM
  }
}

使用JQuery为图像添加跨度

2 个答案: