添加一个链接到一个数组中的图像

我有一个数组列表，工作完好，除了我没有修改一个小部分。添加一个链接到一个数组中的图像

我想让我在阵列中使用的图像具有相关链接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）”有，因为我一直得到展示，而不是一个图像链接的文本是错误的。我希望我的图像显示为链接。

任何支持表示赞赏。

来源

2015-05-23 Rob

您可能需要将img附加到a。如果你想添加docSrc为图像src然后做img.attr('src', doc.docSrc);此之前：

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

item.append(link, title, info);

来源

2015-05-23 18:14:35 Samurai

谢谢！这有帮助。 – Rob

给这样的尝试。以这种方式编写代码会更加自我解释。

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更可靠地选择它们。

来源

2015-05-23 18:10:08 maxhud

感谢您的信息。更多要学习。 – Rob

添加一个链接到一个数组中的图像

回答

相关问题