如何在点击时从不同 div 中的 div 调用数据？

Question

我正在尝试创建一个在线广播电台。作为该过程的一部分，当在页面的不同部分单击故事的播放按钮时，我需要我的播放器调用曲目/故事数据。

我正在使用 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 被用作示例。

Answer 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>

希望它会有所帮助。 :)

Answer 2

如果您的问题是从 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
});

---

回答您的评论：

如果您在目标 div 上有一个类或一个 id，请说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>');
});