javascript - 如何在单击时调用不同 div 中的 div 中的数据?

标签 javascript jquery html angularjs json

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

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

最佳答案

默认情况下,您可以隐藏数据,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>

希望能有所帮助。 :)

关于javascript - 如何在单击时调用不同 div 中的 div 中的数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38566541/

相关文章:

javascript - 不确定为什么没有达到我的限制

Javascript 单例 : How to access private variables?

javascript - jQuery Mobile - 哈希处理以及后续的 jQuery.show() 问题

jquery - 如何从对象中选择和求和值?

javascript - Lightbox 2功能齐全,想要查看的图像全尺寸吗?

javascript - 淡化除具有类别的特定 anchor 之外的所有 anchor

javascript - 使用 Tab 键在对话框元素内循环在 Safari 和 Chrome 中不起作用

javascript:检查 Json 上的多个嵌套属性

javascript - 无法在html中调用.js(使用knockout)

javascript - z-index 没有在标题下制作 slider