使用新的 JS 值在 HTML 文件中重新加载 JS 广播播放器

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”新值的收音机。

我尝试通过下面的load 重新加载包含播放器的div。但是，播放器保持相同的参数...流 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 全局 data-* 作为 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 解决问题的方法。

希望这会有所帮助。