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

Displaying linkable search results + alignment

本文关键字：对齐 方式 搜索结果 链接 显示      更新时间：2023-09-26

我在JS中的第一步。（请忽略每个结果附近的丑陋图像）：）

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

谢谢！

有关完整的代码，请查看此处。（Jsfidle）

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

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

  1. 锚点href 中缺少引号

  2. 添加列表项：无；对于li

  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>

第三个问题有很多解决办法。例如。你可以将图片作为链接的背景。出价。

<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>"

因为您忘记了引号：

 "<a href='" + element.link + "'>" + element.title + "</a>",
相关文章：