我的页面上有多个音频,每个音频都有播放/暂停按钮。
var price = parseFloat($('#price').val());
这是我的脚本,它会更改图标类,以便它可以切换为“播放”或“暂停”图标。
<?php if ( have_posts() ) : ?>
<?php
// the query
$predigten_all_query = new WP_Query(array(
'post_type'=>'predigten',
'post_status'=>'publish',
'posts_per_page'=>-1)); ?>
<?php if ( $predigten_all_query->have_posts() ) : ?>
<div class="content-box">
<!-- the loop -->
<?php while ( $predigten_all_query->have_posts() ) : $predigten_all_query->the_post(); ?>
<?php
// vars
$mp3 = get_field('mp3');
$mp3_url = $mp3['url'];
?>
<div class="archive-content">
<div class="play-wrap">
<audio src="<?php echo $mp3_url; ?>" id="music"></audio>
<i class="fa fa-play" id="play"></i>
</div>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3><br>
<a href="<?php echo $mp3_url; ?>" class="mp3-btn" download>
<i class="fa fa-share-square-o"></i>
</a>
</div>
<?php endwhile; ?>
<!-- end of the loop -->
</div>
问题是这仅适用于我的第一个音频按钮。我是否需要创建动态ID,如果我需要这样做,如何做正确的事情?
非常感谢!
答案 0 :(得分:0)
html更改 你可以使用数据attr。 将动态ID设置为aution id,该id也设置为data-music_id
<div class="play-wrap">
<audio src="<?php echo $mp3_url; ?>" id="music1"></audio>
<i class="fa fa-play" id="play" data-music_id="music1"></i>
</div>
js改变
获取data-music_id并传入document.getElementById
jQuery(document).ready(function($) {
$("#play").click(function() {
var music_id = $(this).data('music_id');
var audio = document.getElementById(music_id);
if (audio.paused) {
audio.play();
$('#play').removeClass('fa fa-play')
$('#play').addClass('fa fa-pause')
} else {
audio.pause();
audio.currentTime = 0
$('#play').removeClass('fa fa-pause')
$('#play').addClass('fa fa-play')
}
});
});
答案 1 :(得分:0)
如果您有多个播放和音频,则可以使用class="play"
代替id="play"
。
在play
点击查找closest
音频并播放或暂停该音频。
<div class="play-wrap">
<audio src="<?php echo $mp3_url; ?>" class="music"></audio>
<i class="fa fa-play" class="play"></i>
</div>
<div class="play-wrap">
<audio src="<?php echo $mp3_url; ?>" class="music"></audio>
<i class="fa fa-play" class="play"></i>
</div>
Js改变
jQuery(document).ready(function($) {
$(".play").click(function() {
var audio = $(this).closest('.audio');
if (audio.paused) {
audio.play();
$(this).removeClass('fa fa-play')
$(this).addClass('fa fa-pause')
} else {
audio.pause();
audio.currentTime = 0
$(this).removeClass('fa fa-pause')
$(this).addClass('fa fa-play')
}
});
});
答案 2 :(得分:0)
问题是因为DOM中的多个#play
和#music
元素必须是唯一的。您可以通过在播放按钮上使用类来解决问题,然后在单击处理程序中使用DOM遍历来查找相关的audio
元素。试试这个:
<div class="play-wrap">
<audio src="<?php echo $mp3_url; ?>" class="music"></audio>
<i class="fa fa-play play"></i>
</div>
$(".play").click(function() {
var audio = $(this).closest('.play-wrap').find('.music')[0];
if (audio.paused) {
audio.play();
} else {
audio.pause();
audio.currentTime = 0
}
$(this).toggleClass('fa-play fa-pause');
});
另请注意使用toggleClass()
来简化播放状态之间类的更改。