将 link 添加到数组中的图像

Question

我有一个数组列表，它工作得很好，只是我没有修改一小部分。

我想让我在数组中使用的图像具有 docSrc 的关联 link。我的代码中有注释。

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>

window.onload = function() {

var docs = [
{
    docTitle: "onesider number 1",
    docInfo:    "its onesider number 1",
    docSrc: "http://www.google.com",
    docImg: "http://www.youthedesigner.com/wp-content/uploads/2011/05/cool-car-designs-13.jpg"
},
{
    docTitle: "onesider number 1",
    docInfo:    "its onesider number 1",
    docSrc: "http://www.google.com",
    docImg: "http://www.youthedesigner.com/wp-content/uploads/2011/05/cool-car-designs-13.jpg"
},
{
    docTitle: "onesider number 1",
    docInfo:    "its onesider number 1",
    docSrc: "http://www.google.com",
    docImg: "http://www.youthedesigner.com/wp-content/uploads/2011/05/cool-car-designs-13.jpg"
},
{
    docTitle: "onesider number 1",
    docInfo:    "its onesider number 1",
    docSrc: "http://www.google.com",
    docImg: "http://www.youthedesigner.com/wp-content/uploads/2011/05/cool-car-designs-13.jpg"
}
],

// This my items container  
container = $('#documents');


$.each(docs,function(i,doc){

// Let's create the DOM
var item = $('<div>').addClass('item'),
    title = $('<h1>'),
    info = $('<div style="background-color:#ff0000;">'),
    link = $('<a target="_blank">'),
    img = $('<img>').addClass('header');

// Add content to the DOM
/*link.attr('href',doc.docSrc)
.text(doc.docTitle)
.appendTo(title);*/ /// This works fine for DocTitle

/* This is the part that I am not able to figure out.  I know I shouldn't be using text but I do not know my other options. */
link.attr('href',doc.docSrc)
.text(doc.docImg)
    .appendTo(img);

info.text(doc.docInfo);
/*img.attr('src',doc.docImg);*/

// Append the infos to the item
item.append(img,title,info);

// Append the item to the container
item.appendTo(container);
});


//code here
}
</script>

<style>
#documents {
padding: 0px;
width:100%;
}

.item {
background-color: #dedede;
padding: 10px;
margin-bottom: 20px;
}
.header {
position:relative;
margin: 0 auto;
background-color:#6699FF;
width:100%;
border-radius:5px;
}
</style>
</head>

<body>
<div id="documents"></div>
</body>
</html>

我知道这个 ".text(doc.docImg)" 一定是错的，因为我一直在显示文本而不是图像-link .我希望我的图像显示为 link.

感谢任何支持。

Answer 1

试一试。这样写代码更容易解释。

container = $('#documents');

$.each(docs, function(i, doc){
    //parent
    var item = $('<div>').addClass('item');

    //title
    item.append('<h1></h1>');
    $("h1", item).text(doc.docTitle);

    //info div
    item.append('<div style="background-color:#ff0000;"></div>');
    $("div", item).text(doc.docInfo);

    //image link
    item.append('<a target="_blank"></a>');
    $("a", item).attr("href", doc.docSrc).append('<img class="header">');
});

您没有正确地相互添加元素。

一些其他提示：

1 - 像这样正确缩进 html：

<html>
    <head>
         <script>
             //js
         </script>
         <style>
             .class {
                 property: value;
             }
         </style>
    </head>
    <body>

    </body>
</html>

2 - 在项目的每个子项上使用 class 名称，以便您可以使用 css.

更可靠地 select 它们

Answer 2

您可能想将 img 附加到 a。如果你想添加 docSrc 作为图像的 src 那么在这之前做 img.attr('src', doc.docSrc);:

link.attr('href', doc.docSrc)
    .text(doc.docImg)
    .append(img);

item.append(link, title, info);

将 link 添加到数组中的图像

Adding a link to an image in an array

javascript

arrays

image

href

hyperlink