Проблемы с динамически генерируемой ссылкой на идентификатор в javascript - PullRequest
Новая
       10

Проблемы с динамически генерируемой ссылкой на идентификатор в javascript

0 голосов
/ 21 января 2020

У меня есть страница со списком аудиофайлов; зритель нажимает на ссылку и воспроизводит соответствующий аудиофайл.

При нажатии на новую ссылку все текущее аудио должно прекратиться. Включая эту ссылку, если она уже играет. Так; каждая ссылка является началом / остановкой для этого аудиофайла.

Я создал сценарий JQuery / JS, который должен это делать, но, похоже, что у сценариев есть проблемы с объявлением this и с Быть динамическим c.

Идентификатор аудио такой же, как и текст внутри ссылки привязки.

HTML: 

<audio id="Perihelion" src="/music/Perihelion.mp3" preload="auto"></audio>
<audio id="MassedVerses" src='/music/MassedVerses.mp3' preload="auto"></audio> 

<a class='music'>Perihelion</a>
<br><BR>
<a class='music'>Massed Verses</a>

JS: 

$(document).ready(function() {
   /* PlayOn variable is required to know if the click on the link is
       starting or stopping THAT audio */
    var playOn = true;

   var sounds = document.getElementsByTagName("audio");
    $(".music").click(function (event) { 
        /* Prevent anchor default */
        event.preventDefault();

        /* Stopping all audio, on link click no matter what */
        for( i=0; i < sounds.length; i++) {
            sounds[i].pause();
        }


        /* Trying to dynamically generate id reference */ 
        var audioName = $(this).innerHTML;
        /* remove whitespace from the string */
        audioName = audioName.replace(/\s+/g, "");
        var fullAudioIdName = "#" + audioName;
        var audio = $(fullAudioIdName)[0];

        if (playOn === true) {
            audio.play();
            playOn = false;
            $(this).html("Stop "+audioName);
        }  else {
            audio.pause();
            $(this).html(audioName);
            playOn = true;
        }

    });
});

Аргументация моего процесса

  • Пользователь щелкает один из якорей - якорь называется «Перигелий»;
  • this musi c class затем запускает функцию JS click.
  • Необходимо innerHTML собрать из этого элемента, а затем использовать его как ссылку для поиска связанного <audio> id (удаление названия белого пробел)
  • Повторное нажатие на ту же ссылку должно остановить воспроизведение текущего звука и воспроизведение всего аудио и переключить переменную триггера.

Мои проблемы

TypeError : audioName не определено audioPlay. js: 10: 9

Я пытался использовать .toString() и для внутреннего HTML, но это также не имеет успеха

$ (...). Inner HTML не определено

Моя цель

Я хочу иметь динамический сценарий c JQuery / Javascript так что он может воспроизводить аудиофайл, чье <audio> id является именем в тегах привязки.

так: 

        var audioName = $(this).innerHTML; 
        /* Massed Verses */
        audioName = audioName.replace(/\s+/g, "");
        /* MassedVerses */ 
        var fullAudioIdName = "#" + audioName;
        /* #MassedVerses */
        var audio = $(fullAudioIdName)[0];
        /* audio is $(#MassedVerses)[0];

Что я пропустил?

Я ненавижу Javascript. Ворчать ворчать ...

1 Ответ

1 голос
/ 21 января 2020

Действительно, внутреннее свойство HTML (не метод) не существует для объекта jQuery. Вы должны вызывать его для объекта DOM (JS). Это $("...").html() или $("...").get(0).innerHTML, поскольку метод get возвращает чистый JS объект DOM.

...