Блог

Главная - Вопросы по программированию - Как отобразить источник данных в виде тега привязки во всплывающем сообщении

Как отобразить источник данных в виде тега привязки во всплывающем сообщении

#javascript

#javascript

Вопрос:

Моя переменная содержимого всплывающего окна выглядит следующим образом, и я хотел бы добавить источник данных в виде тега привязки (URL) внутри содержимого всплывающего окна. Я много пробовал, но всегда получаю синтаксическую ошибку.

 var popupContent = "<p class='infowindow'> Estimated Population in 2018 in the state of " feature.properties.State " was: "   feature.properties.Pop_2018  "</p>";

Комментарии:

1. Не могли бы вы указать, что именно вы хотите добавить и куда? Добавьте пример ошибок и ваших попыток. Это поможет нам ответить на ваш вопрос.

2. Я хочу добавить источник данных внутрь всплывающего содержимого сообщения. Например, я хочу иметь всплывающее сообщение, подобное приведенному ниже. Оценочная численность населения в 2018 году в штате Колорадо составляла: 3847599 Источник данных: census.gov Функция уже определена, и я хочу только изменить содержимое всплывающего окна

3. итак, вы хотите добавить ссылку в свой <p> ?

4. Правильно. Внутри <p> Легко добавить тег привязки в html, но в JavaScript это немного сложнее.

5. Почему это сложно? Добавьте "<a href=''>Source</a>" перед закрывающим </p> тегом, и он будет работать

Ответ №1:

Я не совсем уверен, чего вы хотите. но могу ли я предположить, что смогу помочь вам с этим решением. 

   var title = "Population Census";
  var State="chicago";
  var Pop_2018="3847599";
  var Data_Source="http://worldpopulationreview.com/us-cities/chicago-population/";
  var popupContent='Estimated Population in 2018 in the state of ' State ' was: '  Pop_2018  ' DataSource: <a href="' Data_Source '">census.gov</a>';

  $('[data-toggle="popover"]').popover(); 
  $("#popUp2").attr({"data-original-title": title, "data-content": popupContent});  
 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

  <a href="#" id="popUp2" data-toggle="popover"  data-html="true">popup</a>

</body>
</html>

Комментарии:

1. Ему ничего не нужно об data- атрибутах, посмотрите комментарий под его разделом.