使用JQuery为图像添加跨度

Adding span to images with JQuery

本文关键字：添加 图像 JQuery 使用      更新时间：2023-09-26

我试图使用mansory.js创建一个pinterest喜欢的网页，我有麻烦附加到每个图像的唯一描述。我知道我的代码的最后一行是错误的，但我不知道如何修复它。我基本上是将所有的描述标签添加到每个图像的一个span中。

我试着看看其他几个stackoverflow问题，如jQuery:添加元素后的另一个元素和添加图像/s内的div与jQuery但是运气不好。

我的整支笔都在这里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");
    }
}

见http://codepen.io/anon/pen/YXJvEK你是这个意思吗?只在相应的图片后面附加标题?

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

你应该这样构建你的元素:

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

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

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

这样你的代码变得更容易维护，你可以很容易地把你的span添加到你的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
  }
}
相关文章：