Question

我有一个完全正常的数组列表，除了我没有修改一个小部分。

我想让我在数组中使用的图像具有 docSrc 的关联链接。我的代码中有笔记。

<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）”必须是错误的，因为我不断显示文本而不是图像链接。我希望我的图像显示为链接。

感谢任何支持。

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 - 在项目的每个子项上使用类名，以便您可以使用css更可靠地选择它们。

Answer 2

您可能希望将img附加到a。如果您想将docSrc添加为图片＆＃39; src然后在此之前执行img.attr('src', doc.docSrc);：

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

item.append(link, title, info);

添加指向数组中图像的链接

2 个答案: