Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.03.2020, 08:41
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 176

Данные массива, ссылка
У меня есть массив
var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola" ......


И она выводится по набору букв в поле ввода

Как сделать что бы это были ссылки с определёнными стилями

Я думал что можно просто
var countries = ["<a href="#" style="fon>Afghanistan</a>","a href="#" style="fon>Albania</a>","a href="#" style="fon>Algeria</a>","a href="#" style="fon>Andorra</a>","a href="#" style="fon>Angola</a>" .....


Но оказалось то не работает
Ответить с цитированием
  #2 (permalink)  
Старый 09.03.2020, 09:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,604

Сообщение от Сергей Ракипов
Как сделать что бы это были ссылки с определёнными стилями
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .fon{
      background-color: #FF00FF;
      margin: 5px;
      color: #FFFFFF;
      padding: 2px 3px;
      border-radius: 3px;
  }

  </style>

</head>
<body>
<script>
    const countries = ["Afghanistan","Albania","Algeria","Andorra","Angola"];
    const links = countries.map(text => {const link = document.createElement("a");
    Object.assign(link, {text, href : "#", className : "fon"});
    return link;
    })
    document.body.append(...links)
  </script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 09.03.2020, 12:01
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 176

У меня вопрос зачем вместо var писать const

И я не до конца подумал когда создавал тему, у меня в адресе ссылки будет реальный адрес, везде разный а не #
Ответить с цитированием
  #4 (permalink)  
Старый 09.03.2020, 13:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,604

Сергей Ракипов,
по теме
https://learn.javascript.ru/modifying-document
, что использовать и что изменять зависит только от вас.
Ответить с цитированием
  #5 (permalink)  
Старый 11.03.2020, 16:44
Аватар для FreeStyler
Аспирант
Отправить личное сообщение для FreeStyler Посмотреть профиль Найти все сообщения от FreeStyler
 
Регистрация: 13.09.2009
Сообщений: 49

Сергей Ракипов,
ну тогда типа того
<!DOCTYPE html><html><body>
    <script>const countries = [{name: "Afghanistan", url: '123'}, {name: "Albania", url: '321'}];
    const links = countries.map(el => {const a = document.createElement("a");
      Object.assign(a, {text: el.name, href : el.url, className : "fon"});
      return a;
    })
    document.body.append(...links)</script></body>
</html>

Последний раз редактировалось FreeStyler, 25.03.2020 в 11:15. Причина: HTML run
Ответить с цитированием
  #6 (permalink)  
Старый 15.03.2020, 14:15
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 176

Сообщение от FreeStyler Посмотреть сообщение
Сергей Ракипов,
ну тогда типа того
const countries = [{name: "Afghanistan", url: '123'}, {name: "Albania", url: '321'}];
    const links = countries.map(el => {const a = document.createElement("a");
      Object.assign(a, {text: el.name, href : el.url, className : "fon"});
      return a;
    })
    document.body.append(...links)
А можете в двух словах объяснить что к чем.
Ответить с цитированием
  #7 (permalink)  
Старый 15.03.2020, 14:24
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 176

У меня есть задача, и я нашел готовое решение
https://html5css.ru/howto/howto_js_autocomplete.php
но нужно что бы вводимые название были ссылками и со стилями.
Ответить с цитированием
  #8 (permalink)  
Старый 25.03.2020, 11:27
Аватар для FreeStyler
Аспирант
Отправить личное сообщение для FreeStyler Посмотреть профиль Найти все сообщения от FreeStyler
 
Регистрация: 13.09.2009
Сообщений: 49

Сообщение от Сергей Ракипов Посмотреть сообщение
А можете в двух словах объяснить что к чем.
а что конкретно не понятно? Штудируйте учебник для начала https://learn.javascript.ru, но не забудьте так же ES5 и ES6 стандарты глянтуь, ибо в учебнике их вроде нет...
Ну если прям в 2х, то: есть массив объектов, через map метод создаётся массив объектов ссылок, а потом аппендится к телу документа.

Про точки - это т.н. ES6 SPREAD Operator https://vegibit.com/es6-rest-paramet...ead-operators/
<html><body>
    <script>
        function sum(...numbers){
            document.write(numbers)
        }
        document.write('sum:<br/>')
        sum(1, 2, 3);
        document.write('<br/><br/>spread sum:<br/>')
        sum(...[1, 2, 3]);
    </script></body>
</html>

Если хотите работать - учитесь самообучаться, ну и сёрчить на английском прежде всего.

Последний раз редактировалось FreeStyler, 25.03.2020 в 11:53. Причина: upd
Ответить с цитированием
  #9 (permalink)  
Старый 25.03.2020, 12:27
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 176

Сообщение от FreeStyler Посмотреть сообщение
а что конкретно не понятно? Штудируйте учебник для начала https://learn.javascript.ru, но не забудьте так же ES5 и ES6 стандарты глянтуь, ибо в учебнике их вроде нет...
Ну если прям в 2х, то: есть массив объектов, через map метод создаётся массив объектов ссылок, а потом аппендится к телу документа.

Про точки - это т.н. ES6 SPREAD Operator https://vegibit.com/es6-rest-paramet...ead-operators/
<html><body>
    <script>
        function sum(...numbers){
            document.write(numbers)
        }
        document.write('sum:<br/>')
        sum(1, 2, 3);
        document.write('<br/><br/>spread sum:<br/>')
        sum(...[1, 2, 3]);
    </script></body>
</html>

Если хотите работать - учитесь самообучаться, ну и сёрчить на английском прежде всего.
Спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не отображаются данные из массива по id. vlanger2020 Angular.js 1 05.02.2020 05:51
Обход многомерного массива с задержкой после каждого цикла Walk Общие вопросы Javascript 2 14.08.2017 16:17
Передать данные через Ajax zahod5277 AJAX и COMET 1 20.01.2015 21:31
Подскажите как посчитать элементы списков и для каждого списка назначить свои парамет romanpan2 jQuery 7 24.11.2014 18:08
Не совсем обычный фрейм и выезжающий текст при наводе на картинку. amaz245 Элементы интерфейса 35 25.12.2010 16:29