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禁用不在锚元素的标准中;只有按钮。我建议你只需要为它添加一个类，只有在类不存在时才继续。

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不兼容

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

1 个答案: