javascript 中动态生成 id 引用的问题

Question

我有一个包含音频播放文件列表的页面；查看者单击 link 并播放相应的音频文件。

单击新的 link 时，所有当前音频都需要停止。包括那个 link，如果它已经在播放的话。所以;每个 link 是该音频文件的 start/stop。

我构建了一个 JQuery / JS 脚本来执行此操作，但脚本似乎在 this 声明和动态方面存在问题。

音频 ID 与锚点内的文本相同 link。

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

    });
});

我的流程推理

用户单击其中一个锚点 - 锚点称为 "Perihelion"；
this音乐class然后触发JS点击功能。
需要从this元素中收集innerHTML，然后作为参考查找关联的<audio>id(去掉名字白色space)
再次点击相同的link应该停止当前播放的音频和所有播放的音频并切换触发变量。

我的问题

TypeError: audioName is undefined audioPlay.js:10:9

我也尝试在内部HTML上使用.toString()，但这也没有成功

$(...).innerHTML is undefined

我的目标

我想要一个动态 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。咕咕咕咕...

Answer 1

确实 jQuery 对象不存在 innerHTML 属性（不是方法）。您必须在 DOM 对象上调用它 (JS) 它是 $("...").html() 或 $("...").get(0).innerHTML 作为 get 方法 returns 纯 JS DOM 对象。

javascript 中动态生成 id 引用的问题

Problems with dynamically generating id reference in javascript

javascript

jquery

dynamic

this

我的流程推理

我的问题

我的目标

我错过了什么？