使用 JQuery 向图像添加跨度答案

【问题标题】：Adding span to images with JQuery使用 JQuery 向图像添加跨度
【发布时间】：2015-10-16 13:38:09
【问题描述】：

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

我尝试查看其他几个 stackoverflow 问题，例如 jQuery: Add element after another element 和 add image/s inside a div with 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;
}

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");
    }
}

【问题讨论】：

发布来自 ajax 的示例响应和预期的 HTML 输出。
我认为您应该对此进行更多研究， var hl = $("").text(arr[i].headline); $("img").append(hl);
当你有 jQuery 可用时，为什么你使用 XMLHttpRequest？
@TheGeekYouNeed 你不能在<img> 上附加一些东西，它们没有内容。
使用<figure>和<figcaption> - The figure & figcaption elements

标签： javascript jquery html css

【解决方案1】：

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

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

【讨论】：

这正是我的意思。我从来不知道 eq() 函数存在。我会记住这种方法以备将来使用。谢谢

【解决方案2】：

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

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

【讨论】：

图片变量的逻辑语句叫什么？我在其他人的代码中见过很多，但我不明白它叫什么。还要感谢您向我展示这个用于在页面上构建元素的 jquery 模式。它的眼睛更漂亮。
您可以阅读developer.mozilla.org/de/docs/Web/JavaScript/Reference/… 上的规范基本上是：variable = (if condition) ?真值：假值；