Question

这是一个简单的情况：
26个按钮用于26个字母。如果单击该按钮，相应字母的音频将播放一次。如何使代码尽可能简洁？

以下是我想要做的事情：
我计划建立一个学习语言的网站。这是我需要创建的按钮：

当鼠标进入按钮（原始白色）区域（mouseenter（））时，按钮将变为蓝色并反复播放音频;
如果鼠标离开按钮区域（mouseleave（）），该按钮将变回白色并暂停播放音频。
我可能有很多按钮或类似的UI组件。

如何设计使代码尽可能简洁和可重复使用？

我已经实现了一个按钮的动画，请参阅下面的代码。但是我觉得把每个按钮写成非常相似的代码是很尴尬的。在这种情况下，请帮我抽象代码。

<audio loop src="audio/alphabet/n.mp3" id="alphabetpronunciationn"></audio>
<button id="buttonalphabetn" class="btn btn-default btn-block">N n</button>
<script type="text/javascript">
var audioalphabetn = document.getElementById("alphabetpronunciationn");
    $("#buttonalphabetn").mouseenter(function () {
    $("#buttonalphabetn").addClass("btn-primary");
    audioalphabetn.play();
}).mouseleave(function () {
    $("#buttonalphabetn").removeClass("btn-primary");
    audioalphabetn.pause();
});
</script>

Answer 1

构建letter -> audio element地图，以便您可以轻松地引用给定其对应字母的音频元素。 e.g。

var audios = {};
'abc...xyz'.split('').forEach(function(letter) {
   audios[letter] = document.getElementById('alphabetpronunciation' + letter);
});

为每个按钮添加data-*属性，其中包含它所代表的字母，并为每个按钮指定相同的类而不是单个ID：

<button data-letter="n" class="letter btn btn-default btn-block">N n</button>

使用该类将事件处理程序绑定到所有按钮。事件处理程序获取其data-letter属性并访问地图：

$("button.letter").mouseenter(function () {
    $(this).addClass("btn-primary");
    audios[$(this).data('letter')].play();
});

我强调建议您阅读jQuery tutorial，特别是关于selectors和events。

Answer 2

您可以这样做：

 $("document").ready(function(){
    $('.btn-audio').on('mouseenter',function() {
        // add class to button, find previous sibling, start play
        $(this).addClass("btn-primary").prev().play();
    }).on('mouseleave',function() {
        // and reversve...
        $(this).removeClass("btn-primary").prev().pause();
    });
 });

如果这是你真正的HTML。如果标签的嵌套方式不同，则可能需要另一个选择器而不是prev，或者可能需要包含相应音频文件ID的按钮的数据属性。

<audio loop src="audio/alphabet/n.mp3" id="alphabetpronunciationn"></audio>
<button id="buttonalphabetn" class="btn btn-audio btn-default btn-block">N n</button>

Answer 3

为每个按钮添加数据属性以指示它代表的字母。在这个例子中，我将使用一个名为＆＃34; playLetter＆＃34;的数据属性。

<Button id="SomeButtonA" data-playLetter="A">Play A</Button> <Button id="SomeButtonB" data-playLetter="B">Play B</Button> <Button id="SomeButtonC" data-playLetter="C">Play C</Button>

选择具有playLetter属性的所有按钮并指定处理程序。这意味着将为每个按钮调用相同的处理程序。在处理程序中，使用$(this).data("playLetter")读取数据属性并确定要为特定按钮播放哪个字母。

$(":Button[data-playLetter]").mouseenter(function () {
    $(this).addClass("btn-primary");
    audioalphabet.play($(this).data("playLetter");
    });

$(":Button[data-playLetter]").mouseleave(function () {
    $(this).removeClass("btn-primary");
    audioalphabet.pause();
    });

Answer 4

我自己想出了一个解决方案。这是我做的：

<button id="buttonalphabetü" 
  class="btn btn-default btn-block buttonchangingcolorblue" 
  onmouseenter="play('alphabetpronunciationn')"
  onmouseleave="pause('alphabetpronunciationn')">N n</button>

// This part can be reused
<script type="text/javascript">
  function play(audio_id){
    document.getElementById(audio_id).play();
  }
  function pause(audio_id){
    document.getElementById(audio_id).pause();
  }
</script>

// This part abstract the changing color animation into a class(attribute)
<script type="text/javascript">
$(".buttonchangingcolorblue").mouseenter(function () {
    $(this).addClass("btn-primary");
    }).mouseleave(function () {
$(this).removeClass("btn-primary");
    });
</script>

编码真的很有趣！我喜欢编码！

避免在Javascript中重复使用代码：许多用于播放音频的按钮

4 个答案: