使用新的JS值在HTML文件中重新加载JS radioplayer

Question

HTML：

<div id="flashradiobig"></div>

JavaScript无线电播放器（jQuery）：

<script type="text/javascript">
$("#flashradiobig").flashradio({
    streamurl: "http://5.135.83.159", 
    streamtype: "shoutcast2", 
});
</script>

我想点击图片，这将重新加载我的div，包括带有“streamurl”和“streamtype”的新值的无线电层。

我尝试通过执行以下div重新加载包含播放器的load。但是，播放器保持相同的参数...流URL和流类型不变。

<script type="text/javascript">
  $(document).ready(function() {
    $(".radio-preview").on('click',function(event) {
      var url = $(this).prop('href');
      $("#flashradiobig").load(url);
      event.preventDefault();
    });
  });
</script>

Answer 1

使用全局数据 - *

您可以在每个图像上使用html全局数据*作为streamurl和streamtype的属性。 这是一个例子：

HTML：

<img src="[URL]" data-stream-url="http://5.135.83.159" data-stream-type="shoutcast2"/>

<img src="[URL]" data-stream-url="http://urltoradio" data-stream-type="shoutcast1"/>

更多：w3schools。

解决方案

以下是Codepen上使用jQuery的问题解决方案。

希望这有帮助。