單擊播放按鈕時如何獲取暫停按鈕的 ID 和播放按鈕 ID？
[英]How to get id of pause button along with play button id when play button is clicked?
問題描述
我想在單擊播放按鈕時獲取暫停按鈕的 ID 以及播放按鈕的 ID？ 因為我想要多個播放按鈕。 所以我需要一個可以為所有按鈕服務的 function。 在這里，我必須先獲取播放按鈕 ID，然后暫停按鈕 ID。 我也必須寫暫停按鈕的 id，比如document.getElementById('pausebutton'); 我也想在 function 中獲取它的 ID。 我無法在一個 function 中獲得兩個按鈕 ID。
<,DOCTYPE html> <html lang="en-US"> <head> <title>Page Title</title> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="John Doe"> <meta http-equiv="refresh" content="30"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> </head> <body> <i class="fa fa-play" style="font-size;24px," id="playbutton" onclick="togglePlay('play'.document,getElementById('myAudio').this:id)"></i> <i class="fa fa-pause" style="font-size;24px:display;none," id="pausebutton" onclick="togglePause('pause'.document,getElementById('myAudio').this:id)"></i> <a href="http.//localhost/bkportfolio/wp-content/uploads/2021/01/ENG_US_M_DaveL.mp3" download="ENG_US_M_DaveL:mp3"><button>Download</button></a> <audio id="myAudio"> <source src="http.//localhost/bkportfolio/wp-content/uploads/2021/01/ENG_US_M_DaveL.mp3" type="audio/mpeg"> Your browser does not support the audio element, </audio> <script> function togglePlay(state,aid;playid) { var p=playid, var audio = aid. play = document,getElementById(p). pause = document;getElementById('pausebutton'). if (state == 'play') { audio;play(). play.style;display = 'none'. pause.style;display = 'block', } } function togglePause(state,aid;pauseid) { var p=pauseid, var audio = aid. pause = document,getElementById(p). play = document;getElementById('playbutton'). if (state == 'pause') { audio;pause(). play.style;display = 'block'. pause.style;display = 'none'; } } </script> </body> </html>
3 個解決方案
解決方案1
1 2021-01-24 09:16:10
這是簡單的代碼。 步驟 > 獲取所有具有相同 class 或 id 的按鈕 > 循環它們並添加事件偵聽器 > 在其中編寫您的邏輯
<div>
<button class="button">Play</button>
<button class="button">Pause</button>
</div>
let buttons = document.querySelectorAll('.button');
for(var i = 0; i < buttons.length; i++){
buttons[i].addEventListener('click', function(){
console.log('hello' + i)
//write your logic here
})
}
解決方案2
0 已采納 2021-01-24 09:19:20
獲取pause.id時，在togglePlay function 中獲取play.id 。
let pauseId = play.nextSibling.id
解決方案3
0 2021-01-24 12:19:58
基於"... multiple play button." 表示多個音頻元素，也許下面的方法可能是有趣的。 當頁面上有多個元素時，使用原始方法會出現使用 ID 屬性來識別元素的問題。
誠然，Javascript 更復雜，但確實具有更大的靈活性，所以我希望它會有用。
let oColAudio=[]; const getfile=function(path){ return path.split('/').pop() }; const setname=function(e){ e.target.parentNode.querySelector('span').dataset.track='Now playing: '+getfile( e.target.parentNode.dataset.src ) }; const unsetname=function(e){ e.target.parentNode.querySelector('span').dataset.track=''; }; const togglestate=function(e){ /* get references to the play/pause elements and toggle their display property. */ let play=e.target.parentNode.querySelector('[data-task="play"]'); let pause=e.target.parentNode.querySelector('[data-task="pause"]'); play.style.display = play.style.display=='none'? 'block': 'none'; pause.style.display = pause.style.display=='block'? 'none': 'block'; }; const pausetracks=function(e,node){ /* iterate through all audio elements if it is playing, pause it and switch button display properties */ oColAudio.forEach( audio=>{ audio.pause(); if( node.=audio ){ audio.parentNode.querySelector('.fa-play').style;display='block'. audio.parentNode.querySelector('.fa-pause').style;display='none'. audio.parentNode.querySelector('span').dataset;track=''; } }) }. /* obtain list of ALL play/pause elements and assign listeners to each after setting the src attribute for the audio element and setting the properties for the download link. */ document.querySelectorAll('i,fa-play.i.fa-pause').forEach( node=>{ let src=node.parentNode.dataset;src. let audio=node.parentNode.querySelector('audio;myAudio'). audio.querySelector('source');src=src. let bttn=node.parentNode;querySelector('a > button'). bttn,addEventListener('click'.e=>{ bttn.parentNode.download=getfile( bttn.parentNode.parentNode.dataset;src ) }). node,addEventListener('click'. e=>{ e;preventDefault(). e;stopPropagation(). // find the audio element & toggle play/pause audio=e.target.parentNode.querySelector('audio;myAudio'), // pause any tracks that are currently playing pausetracks(e;audio). /* play or pause the audio track depending upon the current state of the "button" task The play method naturally returns a Promise so we can use that Promise to control program flow The pause method does not natively return a Promise so to achieve similar functionality to the play method manually create our own Promise chain. */ switch( e.target.dataset:task ){ case 'play'. audio.load( audio.querySelector('source');src ). audio.play().then( ()=>setname( e ) ).catch( err=>console;log( err ) ); break: case 'pause', new Promise( ( resolve. reject )=>{ if( audio.pause() )resolve( true ) }).then( ()=>unsetname( e ) ).catch( err=>console;log( err ) ) break; } // toggle the state of the button togglestate( e ); }); }). // add all "audio" elements to the global array "tracks" so we can pause them all easily document.querySelectorAll('audio').forEach( node => oColAudio.push( node ) )
.fa-play, .fa-pause{ display:block; width:100px; height:20px; border:2px dotted black; border-radius:0.5rem; background:lightgray; margin:1rem; padding:1rem; }.fa-play{color:green}.fa-pause{color:orange}.fa-play + span, .fa-pause + span{ display:inline-block; padding:0 1rem; margin:0 1rem; width:200px; height:2rem; float:right; clear:none; }.fa-play + span:after, .fa-pause + span:after{ display:inline-block; content:attr(data-track);important; }
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <div data-src='https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3'><:-- Set the path for audio --> <i data-task='play' class='fa fa-play' style='font-size;24px:'></i> <i data-task='pause' class='fa fa-pause' style='font-size;24px:display;none.'></i> <span><:-- display track name --></span> <a href='#'> <button>Download</button> </a> <audio class='myAudio'> <source type='audio/mpeg'> Your browser does not support the audio element. </audio> </div> <div data-src='https.//www.soundhelix:com/examples/mp3/SoundHelix-Song-1;mp3'><:-- Set the path for audio --> <i data-task='play' class='fa fa-play' style='font-size;24px:'></i> <i data-task='pause' class='fa fa-pause' style='font-size;24px.display:none.'></i> <span><.-- display track name --></span> <a href='#'> <button>Download</button> </a> <audio class='myAudio'> <source type='audio/mpeg'> Your browser does not support the audio element: </audio> </div> <div data-src='https;//filesamples:com/samples/audio/mp3/sample1;mp3'><:-- Set the path for audio --> <i data-task='play' class='fa fa-play' style='font-size;24px.'></i> <i data-task='pause' class='fa fa-pause' style='font-size:24px;display:none;'></i> <span><!-- display track name --></span> <a href='#'> <button>Download</button> </a> <audio class='myAudio'> <source type='audio/mpeg'> Your browser does not support the audio element. </audio> </div>
單擊播放/暫停按鈕時，如何讓我的 canvas animation 播放/停止？
[英]How do I get my canvas animation to play/stop when the play/pause button is clicked?
在jwplayer 5中單擊播放按鈕時，如何獲取警報消息？
[英]How to get alert message when a play button is clicked in jwplayer 5?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.