Как использовать динамический идентификатор элемента с Javascript onClick для JPlayer

Question

Я попытался понять это сам, и я обычно не останавливаюсь, пока не узнаю что-то. Однако это меня насторожило.

Наша уникальная ситуация связана с использованием цикла продуктов WooCommerce, который отображает ряд продуктов на нашей домашней странице. Когда пользователь переводит изображение продукта, наложение затем отображается кнопкой воспроизведения и несколькими другими полезными значками.

Нажав эту кнопку воспроизведения, наш проигрыватель должен просто воспроизвести связанный mp3-файл. Я выяснил, как заставить его играть в mp3-файл, основываясь на отображаемом продукте. Однако вскоре я понял, что я должен указать уникальный идентификатор для каждого отображаемого продукта, иначе игрок не будет воспроизводить более одной песни на той же странице. Надеюсь, я еще никого не потерял.

Итак, я понял, почему бы не использовать идентификатор сообщения как уникальный идентификатор? Ниже приведен тег ссылки, который я использую для наложения кнопки воспроизведения.

<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> 

Как вы можете видеть, я однозначно идентифицирующий эту кнопку (и каждый из них в цикле), который генерирует идентификатор, например, как: «myPlayButton-1234»

Моя проблема заключается в том, что когда-то я этот новый идентификатор, я не могу понять, как использовать этот уникальный идентификатор в моем javascript-коде. Если я просто определяю нормальный идентификатор (что-то вроде «myPlayButton»), код работает нормально. Но он будет воспроизводить только первую песню в цикле. Я не могу понять, как использовать этот идентификатор выше в моем коде.

Вот код 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 код, который мы пытаемся использование:

Я где-то читал, что могу ввести php-код внутри своего javascript так, как я делал выше. Однако кнопка воспроизведения просто не работает. Я пробовал много разных методов для получения этого уникального идентификатора в моем JS, но ничего не работает.

Мне нужен способ передать уникальный идентификатор сценарию, чтобы я мог заставить кнопку воспроизведения работать над каждым сообщением/продуктом в цикле. Кроме того, если это помогает знать, я включаю этот небольшой скрипт прямо перед закрывающим тегом 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>