Как я могу вызвать данные из div в другом div по клику?

0

Я пытаюсь создать онлайн-радиостанцию. Как часть процесса, мне нужен мой плеер для вызова дорожек/сюжетных данных, когда кнопка воспроизведения для истории нажата на другую часть страницы.

Я использую JSON для вызова данных в каждый div. Данные, которые я имею для рассказов, следующие:

<div class="play_button text-hide" 
data-id="{id}" 
data-title="{title}" 
data-storyurl="{fullUrl}" 
data-program="{category}" 
data-programurl="{category.fullUrl}" 
data-type="audio" 
data-src="{soundcloudLink}" 
data-item-type="story" 
data-pub-date="{addedOn}">
</div>

Как я могу назвать эти данные для моего игрока, который является отдельным div на клике?

Другими словами, моя страница будет иметь несколько историй с аудиофайлами, и всякий раз, когда один из них будет нажат, я хотел бы, чтобы плеер отображал

<div>
<a href="{fullUrl}">{title}</a>
<a href="{category.fullUrl}">{category}</a>
</div>

Для каждого трека/сюжета, который щелкнут.

В качестве примера использовался WBEZ.

  • 0
    Вы используете что-нибудь еще, кроме jQuery ?
  • 0
    Рассматривали ли вы использование объектов JSON для хранения данных? Вы также можете проверить AngularJS Framework для привязки данных.
Показать ещё 4 комментария
Теги:

2 ответа

1

Вы можете скрыть свои данные по умолчанию, и onclick вы можете установить его на видимый.

Попробуй это,

<html>
<head>
<style>
#panel, .flip {
    font-size: 16px;
    padding: 10px;
    text-align: center;
    background-color: #4CAF50;
    color: white;
    border: solid 1px #a6d8a8;
    margin: auto;
}

#panel {
    display: none;
}
</style>
</head>
<body>

<p class="flip" onclick="myFunction()">Tere Sang yara</p>

<div id="panel">
  <p>Tere Sang yara</p>
  <p>Movie : Rushtam</p>
  <p>Great Movie</p>
  <p>Listening now</p>
</div>

<script>
function myFunction() {
    document.getElementById("panel").style.display = "block";
}
</script>

</body>
</html>

Надеюсь, это поможет. :)

Поделиться
0

Если ваша проблема заключается в получении данных от div и проигрывателя, это должно сделать это:

$(".play_button").click(function(event){//click on the div with the information
    var el = $(this);//the div
    var dataToPass = {//your data in an object
        dataId: el.attr("data-id"), 
        dataTitle: el.attr("data-title"), 
        dataStoryUrl: el.attr("data-storyurl"), 
        dataProgram: el.attr("data-program"), 
        dataProgramUrl: el.attr("data-programurl"), 
        dataType: el.attr("data-type"), 
        dataSrc: el.attr("data-src"), 
        dataItemType: el.attr("data-pub-date")};

    //Send it to your player (not sure what your idea is)

    //You can access it like
    var test = dataToPass.dataId;//same goes for the others
});

Отвечая на ваш комментарий:

Если у вас есть класс или id на целевом div, скажите target:

<div id = "target"> <a href="{data-storyurl}">{data-title}</a> <a href="{data-programurl}">{data-program}</a> </div>

,ты можешь сделать:

    $("#target").html(
'<a href="'+dataToPass.dataStoryUrl+'">"'+dataToPass.dataTitle+'"</a>\
<a href="'+dataToPass.dataProgramUrl+'">"'+dataToPass.dataProgram+'"</a>');

'\' в конце строки 2 только для разрыва строки в строке

Теперь все вместе (я удалил неиспользуемые переменные (атрибуты) для этой части):

$(".play_button").click(function(event){//click on the div with the information
    var el = $(this);//the clicked div
    var dataToPass = {//your data in an object
        dataTitle: el.attr("data-title"), 
        dataStoryUrl: el.attr("data-storyurl"), 
        dataProgram: el.attr("data-program"), 
        dataProgramUrl: el.attr("data-programurl")};

    //Send it to the target div
     $("#target").html(
'<a href="'+dataToPass.dataStoryUrl+'">"'+dataToPass.dataTitle+'"</a>\
<a href="'+dataToPass.dataProgramUrl+'">"'+dataToPass.dataProgram+'"</a>');
});
Поделиться
  • 0
    Поэтому, если я хочу отправить код так, чтобы результат выглядел следующим образом: <div> <a href="{data-storyurl}">{data-title}</a> <a href="{data-programurl}">{data-program}</a> </div> Как я могу получить к нему доступ?
  • 0
    Это сработало отлично! Спасибо. Кроме того, знаете ли вы, есть ли подобный способ выполнения того, что ваш код делал в AngularJS? Я надеюсь, что смогу понять это. Кроме того, необходимо выработать некоторые зависимости, например, ничего не отображать, когда данные не определены. Если больше ничего, еще раз спасибо, я очень благодарен!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню