为啥我的数组结果不符合我的 CSS 规则？
Posted
技术标签:
【中文标题】为啥我的数组结果不符合我的 CSS 规则？【英文标题】：Why does my array's result doesn't follow my CSS rules?为什么我的数组结果不符合我的 CSS 规则？ 【发布时间】：2020-07-08 10:42:18 【问题描述】：当用户键入单词时，我正在使用以下代码生成自定义链接。
该项目是用我在网上找到的大量代码编写的。除了两件事之外，一切都令人惊讶地“有效”：
生成的链接不遵循 CSS 规则 我找不到任何分离每个链接的方法在我的编程之旅中，我有点陷入困境。 PS：如果需要，这里是 Fiddle https://jsfiddle.net/Adrienmlt/uspjLceg/4/
//SEARCH BOX INSPUT
$('#go').one('click', function()
var id=$('#id').val();
//ARRAY LIST 1
var linkList =
"http://google.com/": "Test1",
"http://google.org/": "Test2",
"http://google.net/": "Test3",
;
//LINK GENERATION FROM ARRAY
for (var link in linkList)
if (linkList.hasOwnProperty(link))
var a = document.createElement('a');
linkText = document.createTextNode(linkList[link]);
a.href = link+id;
a.appendChild(linkText) ;
//CHECK BOX INPUT
if( $('input[name=Label2]').is(':checked') )
window.open(document.body.appendChild(a))
else
document.body.appendChild(a);
//EVERY LINK OPENS IN A NEW WINDOW
var links = document.links;
for (var i = 0; i < links.length; i++)
links[i].target = "_blank";
);body
padding-left: 20px;
h1
font-size: 10px;
font-family: "roboto";
font-weight: 200;
h2
font-size: 20px;
font-family: "roboto";
font-weight: 200;
div
padding-top: 3px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 8px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<title>Project 1</title>
<script src="js/main.js"></script>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<center>
<h1>
<div>
<!--Chekboxes-->
<input type="checkbox" id="Label2" name="Label2">
<label for="Label2">Open every result in a new tab </label>
</div>
<div>
<input type="text" value="" id="id"/>
<button type="button" id="go">GO</button> </div>
<div id="output"></div>
<div id="linkText"></div>
</h1>
</center>
</body>
</html>【问题讨论】：
您的代码应发布在此处。 Stack Overflow 的功能与 jsfiddle 提供的功能非常相似。您没有在此处发布 CSS，因此很难说问题出在哪里。 所以，您的代码中根本没有设置a 标签的样式。
旁注； if (linkList.hasOwnProperty(link)) linkList 中获取link。它怎么会不是财产？
【参考方案1】：
我认为你的 CSS 遵循规则.. 将以下代码添加到您的 css 中
//SEARCH BOX INSPUT
$('#go').one('click', function()
var id=$('#id').val();
//ARRAY LIST 1
var linkList =
"http://google.com/": "Test1",
"http://google.org/": "Test2",
"http://google.net/": "Test3",
;
//LINK GENERATION FROM ARRAY
for (var link in linkList)
if (linkList.hasOwnProperty(link))
var a = document.createElement('a');
linkText = document.createTextNode(linkList[link]);
a.href = link+id;
a.appendChild(linkText) ;
//CHECK BOX INPUT
if( $('input[name=Label2]').is(':checked') )
window.open(document.body.appendChild(a))
else
document.body.appendChild(a);
//EVERY LINK OPENS IN A NEW WINDOW
var links = document.links;
for (var i = 0; i < links.length; i++)
links[i].target = "_blank";
);body
padding-left: 20px;
h1
font-size: 10px;
font-family: "roboto";
font-weight: 200;
h2
font-size: 20px;
font-family: "roboto";
font-weight: 200;
div
padding-top: 3px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 8px;
a
display:block;
color:red;
text-decoration:none;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<title>Project 1</title>
<script src="js/main.js"></script>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<center>
<h1>
<div>
<!--Chekboxes-->
<input type="checkbox" id="Label2" name="Label2">
<label for="Label2">Open every result in a new tab </label>
</div>
<div>
<input type="text" value="" id="id"/>
<button type="button" id="go">GO</button> </div>
<div id="output"></div>
<div id="linkText"></div>
</h1>
</center>
</body>
</html>【讨论】：
以上是关于为啥我的数组结果不符合我的 CSS 规则？的主要内容，如果未能解决你的问题，请参考以下文章
为啥这个 CSS @keyframes 规则不交叉淡入淡出？