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

Question

我有一个带有音频播放文件列表的页面；观众单击链接，然后播放相应的音频文件。

单击新链接后，所有当前音频都需要停止。包括该链接（如果已在播放）。所以;每个链接都是该音频文件的开始/停止。

我已经构建了应该执行此操作的JQuery / JS脚本，但是这些脚本似乎在this声明和动态方面存在问题。

音频ID与锚点链接中的文本相同。

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音乐类然后触发JS点击功能。
• innerHTML需要从this元素中收集，然后用作查找所关联的<audio> id（删除名称空白）的参考]
• 重新单击同一链接应停止当前音频播放和所有音频播放并切换触发变量。

我的问题

TypeError：audioName是未定义的audioPlay.js：10：9

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

$（...）。innerHTML未定义

我的目标

我想拥有一个动态的JQuery / Javascript脚本，以便它可以播放音频文件，该文件的<audio> id是定位标记中的名称。

so：

        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）上调用它由于get方法返回的是纯JS DOM对象，所以它是$("...").html()或$("...").get(0).innerHTML。