这就是我正在尝试的:
正如您将看到的,崩溃效果很好(我是在html上使用按钮类完成的),但现在问题是;例如,当我点击Jimi Hendrix div的按钮时,其他歌曲也会发出声音,因为它们具有相同的Bootstrap类。 我试着用不同的id命名不同div的按钮,但不起作用。代码:
// HTML
<body>
<div class="container">
<h2>Songs</h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Creedence Clearwater Revival<small> I Heard it Through the Grapevine</small></a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<div class="buttons">
<button type="button" class="btn btn-default btn-lg button-skip-backward">
<span class="glyphicon glyphicon-fast-backward"></span>
</button>
<button type="button" class="btn btn-default btn-lg button-pause">
<span class="glyphicon glyphicon-pause"></span>
</button>
<button type="button" class="btn btn-default btn-lg button-stop">
<span class="glyphicon glyphicon-stop"></span>
</button>
<button type="button" class="btn btn-default btn-lg button-play">
<span class="glyphicon glyphicon-play"></span>
</button>
<button type="button" class="btn btn-default btn-lg button-skip-forward">
<span class="glyphicon glyphicon-fast-forward"></span>
</button>
</div>
<audio src="CCRGrapevine.mp3" id="ccr"></audio></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Jimi Hendrix <small> Hey Joe</small></a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div class="buttons">
<button type="button" id= "enrera" class="btn btn-default btn-lg button-skip-backward">
<span class="glyphicon glyphicon-fast-backward"></span>
</button>
<button type="button" id= "pausa" class="btn btn-default btn-lg button-pause">
<span class="glyphicon glyphicon-pause"></span>
</button>
<button type="button" id= "stop" class="btn btn-default btn-lg button-stop">
<span class="glyphicon glyphicon-stop"></span>
</button>
<button type="button" id="play" class="btn btn-default btn-lg button-play">
<span class="glyphicon glyphicon-play"></span>
</button>
<button type="button" id="endavant" class="btn btn-default btn-lg button-skip-forward">
<span class="glyphicon glyphicon-fast-forward"></span>
</button>
</div>
<audio src="heyjoe.mp3" id="jimi"></audio></div>
</div>
</div>
</div>
请注意,我尝试使用id:
执行此操作// JQuery和JS
$(document).ready(function() {
console.log("ready!");
var audioElement = $("#ccr")[0];
var audioElement2 = $("#jimi")[0];
$(".button-pause").on("click", function() {
$(".button-pause").blur();
$(".button-pause").addClass("active");
$(".button-play").removeClass("active");
audioElement.pause();
});
$(".button-play").on("click", function() {
$(".button-play").blur();
$(".button-play").addClass("active");
$(".button-pause").removeClass("active");
audioElement.play();
});
$(".button-stop").on("click", function() {
$(".button-stop").blur();
$(".button-play").removeClass("active");
$(".button-pause").removeClass("active");
audioElement.pause();
audioElement.currentTime = 0;
});
$(".button-skip-forward").on("click", function() {
$(".button-skip-fastword").blur();
audioElement.currentTime += 5;
});
$(".button-skip-backward").on("click", function() {
$(".button-skip-backward").blur();
audioElement.currentTime -= 5;
});
});
我试图这样做,但所有的歌曲都在播放:
$("#pausa").on("click", function() {
$("#pausa").blur();
$("#pausa").addClass("active");
$("#play").removeClass("active");
audioElement.pause();
我的问题是,当我点击另一个div时,如何禁用第一个div的按钮,以便只播放我想要的歌曲?
答案 0 :(得分:0)
您应该使用$(this)来引用特定按钮
尝试以下
$(".button-pause").on("click", function() {
$(this).blur();
$(this).addClass("active");
$(this).siblings(".button-play").removeClass("active");
var audioElement = $(this).siblings('audio');
audioElement.pause();
});
然后相应地修改其他点击处理程序
希望它有效
答案 1 :(得分:0)
您可以访问单击的按钮的父级,并使用您的案例collapse1
,collapse2
等中的父div元素的ID。
.parent()为您提供直接的父元素。嵌套和调用.parent()函数时必须小心。
基于您提交的代码的示例:
$(".button-pause").on("click", function() {
var id = this.parent().parent().parent().attr('id');
$("#"+ id +" .button-pause").blur();
$("#"+ id +" .button-pause").addClass("active");
$("#"+ id +" .button-play").removeClass("active");
audioElement.pause();
});
您应该在所有jquery .on()事件上应用以下代码。