JPlayer的Javascript onClick事件中如何使用动态元素ID

问题描述

我试图自己弄清楚这一点，通常我不会停下来，直到我弄清楚了。 但是，这让我感到困惑。

我们的独特情况涉及使用WooCommerce产品循环，该循环在我们的主页上显示许多产品。 当用户将鼠标悬停在产品图片上时，覆盖图上会显示一个播放按钮和一些其他有用的图标。

单击此播放按钮后，我们的JPlayer应该只播放关联的mp3文件。 我已经根据显示的产品弄清楚了如何使它播放mp3文件。 但是，我很快意识到我必须为所显示的每个产品指定唯一的ID，否则播放器在同一页面上播放的歌曲不会超过一首。 希望我还没有失去任何人。

所以我想，为什么不使用帖子ID作为唯一标识符？ 以下是我用于播放按钮叠加层的链接标记。

<a id="myPlayButton-<?php the_id(); ?>" data-mp3file="<?php echo $file; ?>" data-mp3title="<?php the_title(); ?>" href="#">
<i class="icon-control-play i-2x"></i>
</a>

如您所见，我唯一地标识了此按钮（以及循环中的每个按钮），该按钮生成一个ID，例如：“ myPlayButton-1234”

我的问题是，一旦有了这个新ID，就无法弄清楚如何在JavaScript代码中使用此唯一ID。 如果我只是定义一个普通ID（例如“ myPlayButton”），则代码可以正常工作。 但是它只会播放循环中的第一首歌曲。 我无法弄清楚如何在我的代码中使用该ID。

这是有效的jplayer代码，但仅播放循环中的第一首歌曲（因为ID对于每个元素而言并不是唯一的）：

<script type="text/javascript">
$("#myPlayButton").click(function () {
             var playbutton = document.getElementById("myPlayButton");
             var mp3id = playbutton.getAttribute('data-mp3file');
             var songtitle = playbutton.getAttribute('data-mp3title');
                 $("#jplayer_N").jPlayer("setMedia", {mp3: mp3id, title: songtitle}).jPlayer("play");
         });
</script>

这是我们要使用的jplayer代码：

<script type="text/javascript">
$("<?php echo '#myPlayButton-'.the_id(); ?>").click(function () {
             var playbutton = document.getElementById("<?php echo 'myPlayButton-'.the_id(); ?>");
             var mp3id = playbutton.getAttribute('data-mp3file');
             var songtitle = playbutton.getAttribute('data-mp3title');
                 $("#jplayer_N").jPlayer("setMedia", {mp3: mp3id, title: songtitle}).jPlayer("play");
         });
</script>

我读过某个地方，我可以按照上面的方式在javascript中输入php代码。 但是，播放按钮根本不起作用。 我尝试了多种方法将唯一ID放入我的JS，但是没有任何效果。

我需要一种将唯一ID传递给脚本的方法，以便可以使播放按钮可以处理循环中的每个帖子/产品。 另外，如果有帮助的话，我会在页脚中关闭BODY标记之前添加此小脚本。 如果我将其放在其他任何地方，将无法使用。 也许我没有在正确的地方使用它？

谁能指导我正确的方向？ 如果我没有提供足够的信息，我深表歉意。 我是这个网站的新手。 我已经潜伏了一段时间了。

非常感谢！