javascript - 使用 JQuery 将跨度添加到图像-6ren

javascript - 使用 JQuery 将跨度添加到图像

转载作者：太空宇宙更新时间：2023-11-03 21:27:44

26

4

我正在尝试使用 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;
}

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

关于javascript - 使用 JQuery 将跨度添加到图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31634957/

26

4

0

文章推荐： c# - 将附加变量传递给 button_click() 方法

文章推荐： c# - 使用 Coredll.dll 检索商店信息

文章推荐： python - 使用 Python Docker API 从 tar 创建 docker

html - 跨度、输入、跨度 100% 宽度 CSS 问题
这就是我现在正在做的事情。我在设计中使用 LESS CSS。我需要在指定输入之间放置 2 个跨度。所有元素的宽度都应为 100%。跨度应始终为 20px 宽度输入宽度可以根据屏幕宽度进行更改。谁能帮帮
html - 跨度/格内的奇数对齐
我有一个包含文本和输入字段的跨度。我想知道是否可以让文本左对齐，输入字段右对齐。 NAME: .textBox{ display:inline-block; width:450px
html - Angular 跨度
我有这个按钮，我想让它在我点击“选择”时调用方法，在我点击“更改”时调用另一个方法: Select Change 我尝试输入 (click)="method()"，但没有成功。我很
javascript - 无法在表情符号后输入文字(跨度)
我正在开发聊天应用程序 (cordova)，当我要在无法输入的表情符号后输入文本时，我在这段代码中遇到了问题 https://output.jsbin.com/radaref This i
链接中的 CSS 跨度
很抱歉，如果这是一个非常愚蠢的问题，但我是一名开发人员，目前我的设计技能很少，我在个人网站上工作并且遇到了一个小问题。我有一个带 ul 的顶部导航和 li元素。这些元素包含链接 . 跨度仅在链接悬
html - 证明两列布局(跨度)
fiddle :https://jsfiddle.net/burz4g8s/4/ 我的 HTML 包含多行双按钮对。服务器端应用程序在 JSP 循环中输出按钮，所以我无法控制各个按钮——我不能使用 d
android - 设置字母间距的字符样式/跨度
TextView.setLetterSpacing允许设置字母间距/字符间距。有没有对应的CharacterStyle / span class允许在 TextView? 中的文本子集上设置字母间距
layout - QML GridLayout 跨度
如何使洋红色矩形比红色矩形短 6 倍？ GridLayout { id: gridLayout anchors.fill: parent flo
twitter-bootstrap - Bootstrap 跨度
我最近开始使用 Twitter Bootstrap，但我似乎无法理解 span 的作用以及为什么会有不同的编号 span，例如 span4、span12？什么是偏移量以及它们何时使用？ (有时与跨度一
javascript - 跨度 jQuery 的总和
我正在尝试构建一个 jQuery 函数来计算跨度中的总数 var sumnormaltotal = 0; $('span[id^="normaloffertotalspan"]').each(func
Haskell - 跨度 elem : evaluation
我想知道haskell如何评估以下表达式。 span (`elem` ['A'..'Z']) "BOBsidneyMORGANeddy" 结果是 ("BOB","sidneyMORGANeddy")
javascript - 第一个空格后的 jquery 跨度
我有三个词，我想在第一个空格之后的内容周围添加一个跨度，所以 hello world 变成: hello world 和: hello world again 变成: hello world agai
css - 文本缩进一个包装的行内 block 跨度
我正在寻找纯 CSS 解决以下问题的方法。考虑以下 HTML: Some text Some text 两者都是正在显示元素 inline-block .如何在第二个的左侧
html - 容器底部定位 float 跨度
如何将 Span 放置在其容器的底部？我目前拥有的:http://jsfiddle.net/wRbax/2/ 我希望 .box 始终位于 .td 的底部 CSS .td { vertical
html - 有序列表中的 float 跨度
我试图在 li 中 float 两个 span。左跨度将有我的标签，在右跨度内我将构建一个具有嵌套跨度的图形。我有基本结构，但 chrome 将数字放在左侧跨度的末尾。我该如何解决这个问题？ HTML
javascript - 如何在文本编辑器中换行(跨度)单词
我有一个像这样的 JavaScript 变量: var text = "A businessman should be able to manage his business matters"; 我想
html - 重叠的 contenteditable 跨度
一些内容可编辑的框与其他框重叠，因此并非所有框都是可编辑的。我想保留与跨度位置中心对齐的文本，如下所示。我如何实现这一点？ span { margin: auto; text-alig
Firefox 和 contentEditable 跨度
我正在使用 WYSIWYG (InnovaEditor) 来编辑我网站上的内容，它适用于 Chrome、IE，主要适用于 Firefox，但 FF 有一个稍微令人讨厌的问题。我将 span 标签插入到
css - 跨度，额外 margin
这是我的 html: Settings Export Import 和CSS: span.button { float:right; margin-righ
css - 跨度 split ，如何避免？
这里是问题所在:http://jsfiddle.net/STG22/3/ 我希望 span 不会分成两个不同的行(就像上面示例中的第三行一样)。我该怎么做？ CSS: span { backg

首页

博学

6Ren·AI

商城

javascript - 使用 JQuery 将跨度添加到图像