切換按鈕上的背景顏色（按鍵/鍵碼）-有解無憂

所以，當我按下按鈕 1“1 PLAY / STOP”時，按鈕變成綠色，當我再次按下它時它會去除顏色。如果我按下 button2“2 PLAY / STOP”，同樣的事情會發生。

如果兩個按鈕中的一個播放，而我按下另一個，它會洗掉一個的顏色并轉到另一個。

我想對 Z 按鈕（按鈕 1）和 X（按鈕 2）執行相同的操作。例如，當我按下 Z 按鈕（鍵碼 90）或 X 鍵（鍵碼 88）來執行滑鼠操作時。

如果所有這些都有更好的編碼，那將非常有用，因為它有 20 多個按鈕......非常感謝！！！

$(document).ready(function(){
  $('#btn1, #btn2').on('click', function() {
    $('#btn1, #btn2').not(this).removeClass('colors');
    $(this).toggleClass('colors');
  });
});

 
var nowplaying = "";

function playButton1() {
  var audio = document.getElementById("1");
  play(audio);
} 

document.addEventListener("keydown", function(e){
  if (e.keyCode === 90){
    var audio = document.getElementById("1");
    play(audio);
  }
});


function playButton2() {
  var audio = document.getElementById("2");
  play(audio);
} 

document.addEventListener("keydown", function(e){
  if (e.keyCode === 88){
    var audio = document.getElementById("2");
    play(audio);
  }
});


function play(audio) { 
  if (audio != nowplaying){
    if (nowplaying != "") {
      nowplaying.pause();
    }
    audio.loop = true;
    audio.play(audio);
    nowplaying = audio;
  } else {
    audio.pause();
    audio.currentTime = 0;
    nowplaying = "";
  }
}

#btn1, #btn2 {
  padding:20px 30px
}

.colors {
  background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btn1" onclick="playButton1()">1 PLAY / STOP</button>

<button id="btn2" onclick="playButton2()">2 PLAY / STOP</button>

<audio id="1" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"></audio>

<audio id="2" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"></audio>

uj5u.com熱心網友回復：

當然，它可以更好地編碼，但它顯示了這個想法：

var nowplaying = "";

function playButton(i) {
  play($(`#${i}`).get(0));
} 

function play(audio) { 
  if (audio != nowplaying){
    if (nowplaying != "") {
      nowplaying.pause();
    }
    audio.loop = true;
    audio.play(audio);
    nowplaying = audio;
  } else {
    audio.pause();
    audio.currentTime = 0;
    nowplaying = "";
  }
}

$(function(){

  $('#btn1, #btn2').on('click', function(e) {
    e.preventDefault();
    $('#btn1, #btn2').not(this).removeClass('colors');
    $(this).toggleClass('colors');
  });
  
  $(document).on("keydown", function(e){
    if (e.keyCode === 90){
      $("#btn2").trigger('click');
    } else if (e.keyCode === 88) {
      $("#btn1").trigger('click');
    }
  });

});

#btn1, #btn2 {
  padding:20px 30px
}

.colors {
  background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btn1" onclick="playButton(1)">1 PLAY / STOP</button>

<button id="btn2" onclick="playButton(2)">2 PLAY / STOP</button>

<audio id="1" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"></audio>

<audio id="2" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"></audio>

uj5u.com熱心網友回復：

您可以使用new Audio()輕松創建和操作您的音頻元素。

Audio() 建構式創建并回傳一個新的 HTMLAudioElement，它可以附加到檔案以供用戶互動和/或收聽，也可以在螢屏外使用來管理和播放音頻。

然后使用資料屬性將您的音頻源存盤在每個按鈕中。

HTML5 的設計考慮了可擴展性，用于應與特定元素相關聯但不需要具有任何定義含義的資料。data-* 屬性允許我們在標準的、語意的 HTML 元素上存盤額外的資訊，而無需其他黑客，例如非標準屬性或 DOM 上的額外屬性。

因此，當您單擊按鈕時，他的data-audio-src值會附加到您之前創建的音頻元素中。

我將按鈕放入 div 中，當單擊子按鈕時設定為活動狀態，因此當您按下X或Z“檢測”一個正在播放的按鈕時，然后切換好按鈕。

let nowplaying = "";
$(document).ready(function() {
  let btnPlays = $('.btn-play')
  btnPlays.on('click', function(e) {
    btnPlays.removeClass('colors');
    $('.btnHolder.active').removeClass('active');
    $(this).toggleClass('colors').parent().addClass('active');
    play(new Audio($(this).data('audio-src')));
  })
}).on("keydown", function(e) {
  if (e.keyCode === 88) {
    console.log('X')
    $('.btnHolder.active>button.btn-play:eq(0)').click()
  } else if (e.keyCode === 90) {
    console.log('Z')
    $('.btnHolder.active>button.btn-play:eq(1)').click()
  }
});
;


function play(audio) {
  if (audio != nowplaying) {
    if (nowplaying != "") {
      nowplaying.pause();
    }
    audio.loop = true;
    audio.play();
    nowplaying = audio;
    console.log("Now playing : "   nowplaying.src);
  } else {
    audio.pause();
    audio.currentTime = 0;
    nowplaying = "";
  }
}

.btn-play {
  padding: 20px 30px
}

.colors {
  background-color: green;
}

.btnHolder.active {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="btnHolder active">
  <button class="btn-play" id="btn1" data-audio-src="https://freesound.org/data/previews/60/60703_781423-lq.mp3">1 PLAY / STOP</button>

  <button class="btn-play" id="btn2" data-audio-src="https://freesound.org/data/previews/60/60703_781423-lq.mp3">2 PLAY / STOP</button>
</div>
<hr>
<div class="btnHolder">
  <button class="btn-play" id="btn3" data-audio-src="https://freesound.org/data/previews/60/60703_781423-lq.mp3">3 PLAY / STOP</button>

  <button class="btn-play" id="btn4" data-audio-src="https://freesound.org/data/previews/60/60703_781423-lq.mp3">4 PLAY / STOP</button>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/334937.html

標籤：javascript html 查询 css

上一篇：如何在JQuery中對子項使用.not選擇器

下一篇：使用jQuery動態更改文本