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

var $play = $('#idj-play-button');
var $pause = $('#idj-pause-button');
var $aufgabe = $('#aufgabe');

$play.click(playAudio);

$pause.click(pauseAudio);

$aufgabe.on('ended', onEnd);

var toggleButtons = function() {
    $play.toggleClass('hide');
    $pause.toggleClass('hide');
}

var playAudio = function() {
    $aufgabe.play();
    toggleButtons();
}

var pauseAudio = function() {
    $aufgabe.pause();
    toggleButtons()
}

var onEnd = function() {
    $aufgabe.load();
    toggleButtons();
}

Answer 2

您可以触发事件创建自定义数据属性并将click事件附加到该事件：

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，他们就可以处理具有指定ID的任何有效<audio>元素。

Answer 3

我刚刚压缩了你的代码，现在它看起来像这样：

var $play = $('#idj-play-button');
var $pause = $('#idj-pause-button');
var $aufgabe = $('#aufgabe');

$play.on('click', function() {
    playAudio();
    toggleButtons();
});

$pause.on('click', function() {
    pauseAudio();
    toggleButtons();
});

$aufgabe.on('ended', function() {
    loadAudio();
    toggleButtons();
});

var toggleButtons = function() {
    $play.toggleClass('hide');
    $pause.toggleClass('hide');
}

var playAudio = function() {
    $aufgabe.play();
}

var pauseAudio = function() {
    $aufgabe.pause();
}

var loadAudtion = function() {
    $aufgabe.load();
}

首先，我已经缓存了所有元素......如果你的变量包含一个元素，我建议你用$启动它，因为它告诉我们变量是一个jquery元素。

如果您需要添加类然后将其删除，则应使用toggleClass。

用音频操作的代码按功能划分，因为我们需要保持一个级别的深度。

有没有办法在javascript中执行此操作？

3 个答案: