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