Question

我试图自己解决这个问题，而且我通常不会停下来直到我弄明白了。然而，这让我很难过。

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

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

所以我想，为什么不使用post 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标记之前包含这个小脚本。如果我把它放在其他地方，它就行不通了。也许我没有在正确的地方使用它？

有人能引导我朝正确的方向前进吗？如果我没有提供足够的信息，我道歉。我是这个网站的新手。我已经潜伏了很长一段时间。

非常感谢！

Answer 1

使用班级代替id。看看是否有效：

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

<script type="text/javascript">
$(".mybutton").click(function () {
    // Using $(this) targets the specific clicked element
    var playbutton  =   $(this);
    // Append your object and use .data()
    var mp3id       =   playbutton.data('mp3file');
    // Append your object and use .data()
    var songtitle   =   playbutton.data('mp3title');
    // Should need no change to this line
    $("#jplayer_N").jPlayer("setMedia", { mp3: mp3id, title: songtitle }).jPlayer("play");
});
</script>

如何在JPlayer

1 个答案: