Как использовать заголовок li в javascript

Здесь я использовал FontAwesome значок для кнопки воспроизведения / паузы. В этом окне вывод отображается в виде двух кнопок воспроизведения. Поскольку stateicon используется в js, а также используется в качестве заголовка для двух ссылок, значок воспроизведения/паузы не работает должным образом. Как изменить #stateicon с соответствующим идентификатором li.

Например: если я нажимаю вторую кнопку, которая имеет заголовок li= «Stateiconone», то» stateiconone » в js должен быть обновлен.

<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>

1 ответ

  1. Ваш вопрос не очень ясен, но я подозреваю, что вы ищете это:

    Передайте ссылку на элемент clicked в функцию (this). Используйте ссылку (el), чтобы найти правильный i. Обновите классы элементов.

    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>