使用JQuery向图像添加跨度

Question

I am trying to create a pinterest like webpage using mansory.js and I am having trouble appending the unique description to each image. 我正在尝试使用mansory.js创建一个类似网页的pinterest，但是我无法在每个图像上附加唯一说明。 I know that the last line of my code is wrong but I have no idea how to fix it. 我知道我的代码的最后一行是错误的，但是我不知道如何解决。 I am basically adding all of the description tags into one span for each image. 我基本上是将所有描述标签添加到每个图像的一个跨度中。

I've tried looking at several other stackoverflow questions such as jQuery: Add element after another element and add image/s inside a div with jquery but with no luck. 我试过看看其他几个stackoverflow问题，例如jQuery：在另一个元素之后添加元素，并在带有jQuery但没有运气的div中添加图像。

My entire pen is here http://codepen.io/OG/pen/VLEXgz 我的整个笔在这里http://codepen.io/OG/pen/VLEXgz

HTML HTML

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

CSS 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 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

See http://codepen.io/anon/pen/YXJvEK Is that what you mean? 请参阅http://codepen.io/anon/pen/YXJvEK这是您的意思吗？ Append the headline after the corresponding image only? 仅在相应图片后添加标题？

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

Answer 2

You should build your elements like this: 您应该像这样构建元素：

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

Then add attributes and classes needed and append them to each other. 然后添加所需的属性和类，并将它们彼此附加。

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

In that way your code gets much more maintainable and you can append your span easily to your img (don't know exactly where you want the description). 这样，您的代码将变得更加易于维护，并且可以轻松地将范围附加到img（不知道确切的描述位置）。

Edit, since I've got my hands on a pc, here's the code you could use. 编辑，因为我已经动手了PC，所以这里是您可以使用的代码。

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 个解决方案

解决方案1
2 已采纳 2015-07-26 08:40:20

解决方案2
2 2015-07-26 08:52:25

使用JQuery向图像添加跨度

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-07-26 08:40:20

解决方案2 2 2015-07-26 08:52:25

解决方案1
2 已采纳 2015-07-26 08:40:20

解决方案2
2 2015-07-26 08:52:25