顯示可鏈接的搜索結果+對齊

Question

我在JS中的第一步。 （請忽略每個結果附近的醜陋圖像）:)

問題：
1.有人知道爲什麼不是所有鏈接都顯示爲可點擊嗎？
2.如何將鏈接標題與每張圖片的中心對齊？
3.我該如何移除煩人的子彈？

謝謝！請致電HERE。 （的jsfiddle）

var list1 = [{"link":"http:\/\/en.wikipedia.org\/wiki\/Balloon","title":"Balloon - Wikipedia, the free encyclopedia"},{"link":"http:\/\/www.balloons.com\/","title":"Balloons.com - Wholesale Balloon Distributor"},{"link":"http:\/\/www.partycity.com\/category\/balloons.do","title":"Party Balloons, Helium Balloons & Balloon Accessories - Party City"},{"link":"http:\/\/clashofclans.wikia.com\/wiki\/Balloon","title":"Balloon - Clash of Clans Wiki"},{"link":"http:\/\/www.balloon-juice.com\/","title":"Balloon Juice"},{"link":"http:\/\/www.balloonfiesta.com\/","title":"The Albuquerque International Balloon Fiesta - Welcome to the ..."},{"link":"http:\/\/www.youtube.com\/watch?v=belCJJjut1A","title":"\"The Balloon Show\" for learning colors -- children's educational video"},{"link":"http:\/\/www.google.com\/loon\/","title":"Loon for All \u2013 Project Loon \u2013 Google"},{"link":"http:\/\/www.youtube.com\/watch?v=khsXGETCqVw","title":"\"Pretty Balloons\" (balloon song for learning colors) - YouTube"},{"link":"http:\/\/www.balloon-app.com\/","title":"Balloon"}] 


function DisplayListItems(list1) {  
     $.each(list1, function(index, element) { 
      var itemHTML = ["<li>", 
           "<div>", 
           "<img src='http://www.tizag.com/pics/htmlT/sunset.gif' height='200' width='200' />", 
           "<a href=" + element.link + ">" + element.title + "</a>",       
           "</div>", 
          "</li>"].join('\n'); 
      $(".list > ul").append(itemHTML); 
     }); 
     } 

DisplayListItems(list1); 

Answer 1

這裏是所有三個問題的解決方案。

1. 報價從錨點HREF失蹤

2. 添加列表項：無;鋰

3. 你可以看到我是如何解決它

\t var list1 = [{"link":"http:\/\/en.wikipedia.org\/wiki\/Balloon","title":"Balloon - Wikipedia, the free encyclopedia"},{"link":"http:\/\/www.balloons.com\/","title":"Balloons.com - Wholesale Balloon Distributor"},{"link":"http:\/\/www.partycity.com\/category\/balloons.do","title":"Party Balloons, Helium Balloons & Balloon Accessories - Party City"},{"link":"http:\/\/clashofclans.wikia.com\/wiki\/Balloon","title":"Balloon - Clash of Clans Wiki"},{"link":"http:\/\/www.balloon-juice.com\/","title":"Balloon Juice"},{"link":"http:\/\/www.balloonfiesta.com\/","title":"The Albuquerque International Balloon Fiesta - Welcome to the ..."},{"link":"http:\/\/www.youtube.com\/watch?v=belCJJjut1A","title":"\"The Balloon Show\" for learning colors -- children's educational video"},{"link":"http:\/\/www.google.com\/loon\/","title":"Loon for All \u2013 Project Loon \u2013 Google"},{"link":"http:\/\/www.youtube.com\/watch?v=khsXGETCqVw","title":"\"Pretty Balloons\" (balloon song for learning colors) - YouTube"},{"link":"http:\/\/www.balloon-app.com\/","title":"Balloon"}] 
 

 

 
function DisplayListItems(list1) { \t \t 
 
\t \t $.each(list1, function(index, element) { 
 
\t \t  var itemHTML = ["<li>", 
 
           "<div class='cont'>", 
 
\t \t \t \t \t \t   "<img src='http://www.tizag.com/pics/htmlT/sunset.gif' height='200' width='200' />", 
 
\t \t \t \t \t \t   "<a width='200' height='200px' href='" + element.link + "'><span>" + element.title + "</span></a>", \t \t \t \t \t \t  
 
\t \t \t \t \t   "</div>", 
 
\t \t \t \t \t  "</li>"].join('\n'); 
 
\t \t  $(".list > ul").append(itemHTML); 
 
\t \t }); 
 
\t } 
 

 
DisplayListItems(list1);

li{ 
 
    list-style:none; 
 
} 
 
.cont 
 
{ 
 
    height:200px; 
 
    width:200px; 
 
    position:relative; 
 
} 
 

 
.cont img 
 
{  
 
    position:absolute; 
 
    left:0; 
 
    top:0; 
 
} 
 
.cont a 
 
{ 
 
    z-index:100; 
 
    position:absolute;  
 
    color:white; 
 
    font-size:24px; 
 
    font-weight:bold; 
 
    width: 200px; 
 
    height: 200px; 
 
    text-align: center; 
 
    line-height: 200px; 
 
    display: block; 
 
} 
 

 
a span { 
 
    display:inline; 
 
    display:inline-table; 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
    line-height: 20px; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="list"> 
 
    <ul></ul> 
 
</div>

有到第3題多解。例如。您可以將該圖像作爲鏈接的背景。 fiddle。

<a width='200' height='200px' href='" + element.link + "' style='background-image: url(\"http://www.tizag.com/pics/htmlT/sunset.gif\");background-size: cover;'><span>" + element.title + "</span></a>" 

Answer 2

因爲你已經忘記了報價：

"<a href='" + element.link + "'>" + element.title + "</a>",