javascript - 有没有办法在javascript中做到这一点？

Question

我只想压缩下面的代码，因为我有数百个单词要发声。

<audio id="aufgabe" preload="auto">
        <source src="../../../audio/aufgabe.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio>
    <button id="idj-play-button" class="btn btn-xs"><i class="glyphicon glyphicon-play"></i></button>
    <button id="idj-pause-button" class="btn btn-xs hide"><i class="glyphicon glyphicon-pause"></i></button>


<script>
    $('#idj-play-button').click(function() {
        document.getElementById('aufgabe').play();
        $('#idj-play-button').addClass('hide');
        $('#idj-pause-button').removeClass('hide');

    });

    $('#idj-pause-button').click(function() {
        document.getElementById('aufgabe').pause();
        $('#idj-pause-button').addClass('hide');
        $('#idj-play-button').removeClass('hide');
    });

    $('#aufgabe').on('ended', function() {
        $('#idj-pause-button').addClass('hide');
        $('#idj-play-button').removeClass('hide');
        $('#aufgabe').load();
    });

</script>

我对 javascript 的了解几乎为零，所以我想知道有什么方法可以实现某种功能，例如:

function vocalizeFile(aufgabe);

导致其他功能

<script>
    $('#idj-play-button').click(function() {
        document.getElementById('aufgabe').play();
        $('#idj-play-button').addClass('hide');
        $('#idj-pause-button').removeClass('hide');

    });

    $('#idj-pause-button').click(function() {
        document.getElementById('aufgabe').pause();
        $('#idj-pause-button').addClass('hide');
        $('#idj-play-button').removeClass('hide');
    });

    $('#aufgabe').on('ended', function() {
        $('#idj-pause-button').addClass('hide');
        $('#idj-play-button').removeClass('hide');
        $('#aufgabe').load();
    });

</script>

所以我不必每次都复制这段代码。提前致谢!

Answer 1

您可以触发创建自定义数据属性并为其附加点击事件的事件:

HTML:

<audio id="aufgabe" preload="auto">
     <source src="../../../audio/aufgabe.mp3" type="audio/mpeg">Your browser does not support the audio element.
</audio>

<button id="idj-play-button" class="btn btn-xs" data-action="play" data-target="#aufgabe">
Play
</button>
<button id="idj-pause-button" class="btn btn-xs hide" data-action="pause" data-target="#aufgabe">
Pause
</button>

jQuery:

  $('body').on('click','[data-action]',function() {
    var action = $(this).data('action');
    var target = $(this).data('target');
    switch(action) {
      case 'play': 
            $(target)[0].play();
      break;
      case 'pause':
            $(target)[0].pause();
      break;
    }
    console.log('Called action ',action,' on element ',target);
  });

这样你只需要添加 data-action=[action-name]和 data-target=#idOfTarget到每个按钮，它们将在任何有效的 <audio> 上工作具有指定 ID 的元素。