javascript - 显示可链接的搜索结果+对齐

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. anchor href 中缺少引号

2. 添加列表项:无；对于李

3. 你可以看看我是如何解决的

	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 class='cont'>",
						         "<img src='http://www.tizag.com/pics/htmlT/sunset.gif' height='200' width='200' />",
						         "<a width='200'  height='200px' href='" + element.link + "'><span>" + element.title + "</span></a>",						   
					           "</div>",
					       "</li>"].join('\n');
		    $(".list > ul").append(itemHTML);
		});
	  }

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>

第三个问题有很多解决方案。例如。您可以将图像作为链接的背景。 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>"