使用JQuery向图像添加跨度

Question

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

我试过看看其他几个stackoverflow问题，例如jQuery：在另一个元素之后添加元素，并在带有jQuery但没有运气的div中添加图像。

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

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（不知道确切的描述位置）。

编辑，因为我已经动手了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