Как динамически передать URL-адрес из данных json в div с помощью jquery?

У меня есть файл json, который содержит идентификатор и URL-адрес нескольких видео. Теперь я должен прочитать URL-адрес из файла json и передать его в div src. Нажав на сам div, видео должно быть загружено в другой div.

ниже упоминается мой html, где я читаю данные json и добавляю их к «href»

<div class = "div1" style = "padding-left:inherit">
<div href = "#">
</div>
</div>

Теперь мне нужно передать href из этого div в src ниже,

<iframe id = "videoplayerDiv" src = "" scrolling = "no" frameborder = "no" align = "center" height = "100%" width = "100%" allowfullscreen></iframe>

и скрипт для добавления src таков,

$(document).ready(function () {
    $.getJSON('/video.json', function (data) {
        $('.div1').click(function (el) {
            $("#videoplayerDiv").attr("src", $(this).attr(url));
        });
    });
});

Может ли кто-нибудь помочь решить эту проблему?

jquery

27.05.2019 07:26

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

111

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

предполагая, что вы json что-то вроде ниже.

var jsonData=[{id:1,"url":"www.youtube.com"},{id:2,"url":"www.youtube.com/1"}];
$(document).ready(function () {
$.getJSON('/video.json', function (data) {
    if (data){
       data.forEach(function(i,o){
           var _div=$("<div/>",{id:o.id});
           _div.attr("url",o.url);
           _div.on('click',function(){
                $("#videoplayerDiv").attr("src", $(this).attr("url"));
           });
           $("#div1").append(_div)
       });
      }

   });
});

и твой хтмл

<div class = "div1" id='div1' style = "padding-left:inherit"></div>

Спасибо!. Я пробовал это, но я получаю сообщение об ошибке «Не определено»

— 27.05.2019 08:19

вместо src = "www.youtube.com" используется src = "undefined", и я не знаю, почему

— 27.05.2019 08:39

распечатайте данные, затем распечатайте o.url, проверьте, что он печатает

— 27.05.2019 08:55

может быть, ваш массив входит в data.value

— 27.05.2019 08:57

27.05.2019 07:57

Другие вопросы по теме

Скользящий div внутри карт Google

Проверка JQuery на несуществующем флажке

Добавьте несколько элементов и используйте классы в методе добавления JQuery

JQuery не загружает всю таблицу

Функция jQuery onClick для отправки данных в php «не определена»

JQuery несколько фильтров по классам

Как динамически загружать Jquery внутри конструктора класса JavaScript и продолжать выполнение только после полной загрузки jquery

Удалить элемент с определенным классом только тогда, когда активен другой класс

Проблема с удалением файлов в Laravel и jquery

Как показать оставшиеся символы, если текстовое поле предварительно заполнено?

Как динамически передать URL-адрес из данных json в div с помощью jquery?

Ответы 1

Другие вопросы по теме

Похожие вопросы