Bootstrap / JQuery手风琴。按钮类

Question

这就是我正在尝试的：

在此输入图像描述

正如您将看到的，崩溃效果很好（我在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的按钮，以便只播放我想要的歌曲？

Answer 1

您应该使用$（this）来引用特定按钮

请尝试以下方法

$(".button-pause").on("click", function() {
  $(this).blur();
  $(this).addClass("active");
  $(this).siblings(".button-play").removeClass("active");
  var audioElement = $(this).siblings('audio');
  audioElement.pause();

}）;

然后相应地修改其他单击处理程序

希望它有效

Answer 2

您可以访问单击的按钮的父级，并使用您的案例中的父div元素的id， collapse1 ， collapse2等。

.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（）事件上应用以下代码。

Bootstrap / JQuery手风琴。按钮类

问题描述

2 个解决方案

解决方案1
0 2015-03-04 11:13:17

解决方案2
0 2015-03-04 11:20:45

Bootstrap / JQuery手风琴。 按钮类

问题描述

2 个解决方案

解决方案1 0 2015-03-04 11:13:17

解决方案2 0 2015-03-04 11:20:45

Bootstrap / JQuery手风琴。按钮类

解决方案1
0 2015-03-04 11:13:17

解决方案2
0 2015-03-04 11:20:45