有沒有辦法在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(); 
}