javascriptのliヘッダーの使い方

Question

ここでは、再生/一時停止ボタンにfontawesomeアイコンを使用しました。ここでは、出力を2つの再生ボタンとして見ることができます。 stateiconはjsで使用され、2つのリンクのヘッダーとしても使用されるため、再生/一時停止アイコンが正しく動作しません。対応するli idで#stateiconを変更する方法。

例：li header = "Stateiconone"を持つ2番目のボタンをクリックすると、jsの "stateicon"を更新する必要があります。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script> 
function aud_play_pause(myVar) { 
    if (myVar === myTune) { 
     var myAudio = document.getElementById("myTune"); 
    } 
    if (myVar === myTunes) { 
     var myAudio = document.getElementById("myTunes"); 
    } 
    if (myAudio.paused) { 
     $('#stateicon').removeClass('fa fa-play'); 
     $('#stateicon').addClass('fa fa-pause'); 
     myAudio.play(); 
    } else { 
     $('#stateicon').removeClass('fa fa-pause'); 
     $('#stateicon').addClass('fa fa-play'); 
     myAudio.pause(); 
    } 
} 

体コード：

<a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview" onclick="aud_play_pause(myTune)"><i id="stateicon" class="fa fa-play"></i></a> 
<a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview" onclick="aud_play_pause(myTunes)"><i id="stateiconone" class="fa fa-play"></i></a> 

<audio id="myTune"> 
<source src="http://website.com/1.mp3" type="audio/mpeg"> 
</audio> 
<audio id="myTunes"> 
<source src="http://website.com/2.mp3" type="audio/mpeg"> 
</audio> 

Answer 1

ご質問はひどく明らかではないが、私はあなたがこの探している疑いがある：

あなたの関数にクリックされた要素への参照（this）を渡し。正しいiを見つけるには、参照（el）を使用してください。要素クラスを更新します。

function aud_play_pause(myVar, el) { 
 
    if (myVar === myTune) { 
 
    var myAudio = document.getElementById("myTune"); 
 
    } 
 
    if (myVar === myTunes) { 
 
    var myAudio = document.getElementById("myTunes"); 
 
    } 
 
    if (myAudio.paused) { 
 
    $(el).find('i').removeClass('fa fa-play'); 
 
    $(el).find('i').addClass('fa fa-pause'); 
 
    myAudio.play(); 
 
    } else { 
 
    $(el).find('i').removeClass('fa fa-pause'); 
 
    $(el).find('i').addClass('fa fa-play'); 
 
    myAudio.pause(); 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 

 
<a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview" onclick="aud_play_pause(myTune, this)"><i id="stateicon" class="fa fa-play"></i></a> 
 
<a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview" onclick="aud_play_pause(myTunes, this)"><i id="stateicon" class="fa fa-play"></i></a> 
 

 
<audio id="myTune"> 
 
    <source src="http://website.com/1.mp3" type="audio/mpeg"> 
 
</audio> 
 
<audio id="myTunes"> 
 
    <source src="http://website.com/2.mp3" type="audio/mpeg"> 
 
</audio>