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

这是所有三个问题的解决方案。

锚点href
add list-item：none;为李
你可以看到我是如何解决它的

＆＃13;

	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);

＆＃13;

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;

}

＆＃13;

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

＆＃13;

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

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

2 个答案: