Я использую следующий код для создания пользовательских ссылок, когда пользователь вводит слово.
Проект написан с использованием фрагментов кода, которые я нахожу в Интернете. Все на удивление «работает», кроме двух вещей:
- сгенерированные ссылки не соответствуют CSS правилам
- Я не могу найти способ отделить каждую ссылку
Я застрял здесь в своем путешествии через кодирование. PS: При необходимости вот Скрипка 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>