jquery - 播放音频文件时未禁用按钮

Question

我有一个单词列表及其对应的音频文件。单击一个按钮时，音频文件将连续播放，这部分工作正常。但是在播放列表时并未禁用该按钮。因此，有可能一次播放一次列表。这是html:

    <a class="repeat_btn" href="#"><span class="fa fa-repeat fa_repeat_ws"></span></a>

这是jQuery代码:

    "use strict";
    jQuery.noConflict();
    jQuery(document).ready(function() {
      jQuery("a.repeat_btn").click(function (evnt) {
        evnt.stopPropagation();
        jQuery(this).attr("disabled","disabled");                         // to disable button
        var engWords = jQuery("span.audio"),
          pathVar = document.getElementById("pathVar").innerHTML,
          audioElement = document.createElement("audio"),
          audioType = Modernizr.audio.ogg? ".ogg": ".mp3",
          i = 0;
        audioPlay(i);
        audioElement.addEventListener( "ended", function() {
          i++;
            if ( i < 100 ) {
              audioPlay(i);
            }
        });
        function audioPlay(i)  {
          var wordList = jQuery("span#"+engWords[i].id),
            audioPath = pathVar+engWords[i].id+audioType;
          wordList.addClass("set_font_green");
          audioElement.src = audioPath;
          audioElement.play();
          jQuery.doTimeout(1000, function()  {
           wordList.removeClass("set_font_green");
         });
        }
        jQuery(this).removeAttr("disabled");   // to enable the button
      });
    });

我的问题是需要做什么来确保在播放单词列表时禁用按钮，并在单词列表播放完毕后再次启用按钮。

Answer 1

如评论中所述，禁用property不在 anchor 元素的标准中。仅按钮。我建议您改为向其中添加一个类，并且仅当该类不存在时才继续操作。

jQuery("a.repeat_btn").click(function (evnt) {
    // stop if the class is present
    if (this.classList.contains('disabled'))
        return;
    this.classList.add('disabled');
    // rest of code ...

    // enable again
    this.classList.remove('disabled');
});

上面的代码由于使用 classList而与IE8不兼容。