有没有办法在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

您可以触发事件创建自定义的数据属性和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到每个按钮，他们将工作在一个y有效的<audio>元素与指定的ID。

Answer 2

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

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。

与音频操作的代码被功能分开，因为我们需要维护一个级别的障碍物。

Answer 3

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(); 
}