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

问题描述：

我使用JS的第一步. (请忽略每个结果附近的丑陋图片):)

My first steps in JS. (Please ignore the ugly image near each result) :)

问题:
1.有人知道为什么不是所有链接都显示为可点击吗?
2.如何将链接标题与每张图片的中心对齐?
3.如何删除烦人的子弹?

Questions:
1. Do somebody know why not all the links appear as clickable?
2. How can I align the link titles to the center of each picture?
3. How can I remove the annoying bullets?

谢谢！

有关完整代码，请查看此处. (Jsfiddle)

For complete code please look 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);

答

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

Here is a solution for all three questions.

锚href

引号

添加列表项:无；为李

add list-item:none; for li

您可以看到我的解决方法

you can see how i solved it

	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>

第三个问题有很多解决方案.例如.您可以将图像作为链接的背景.小提琴.

There are many solutions to the 3rd problem. eg . You can give the image as background of the link.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>"

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

相关推荐