わずかに異なるロジックを含む関数の数を減らすにはどうすればよいですか？

Question

私は現在、javascriptでinbuiltオーディオAPIを使用して音楽プレーヤーで作業しています。 それは次のようになります。私は歌に私は歌がリストされている別のタブを押すたびに変更するプレイリスト機能を持っている

。コードは次のようになります。

$('#song1').click(function() { 
    audio.pause(); 
    audio.currentTime = 0; 
    audio.src = "../sounds/1.mp3"; 
    audio.play(); 
}); 

$('#song2').click(function() { 
    audio.pause(); 
    audio.currentTime = 0; 
    audio.src = "../sounds/2.mp3"; 
    audio.play(); 
}); 

$('#song3').click(function() { 
    audio.pause(); 
    audio.currentTime = 0; 
    audio.src = "../sounds/3.mp3"; 
    audio.play(); 
}); 

$('#song4').click(function() { 
    audio.pause(); 
    audio.currentTime = 0; 
    audio.src = "../sounds/4.mp3"; 
    audio.play(); 
}); 

$('#song5').click(function() { 
    audio.pause(); 
    audio.currentTime = 0; 
    audio.src = "../sounds/5.mp3"; 
    audio.play(); 
}); 

$('#song6').click(function() { 
    audio.pause(); 
    audio.currentTime = 0; 
    audio.src = "../sounds/6.mp3"; 
    audio.play(); 
}); 

これを6つではなく1つの関数にするにはどうすればよいですか？また、プレイリストにタブを追加すると、そこにある曲の数を選択できる必要があります。ありがとうございます

Answer 1

ここで採用しようとしている技術は、「あなた自身をやめないでください」または「DRY」と呼ばれています。

この場合、最も簡単な方法は、HTML構造をすべての要素に共通にすることですが、class属性をグループ化し、data属性を使用してカスタムメタデータを保持します。そして、あなたはそれらすべての上の単一のイベントハンドラ、このようなものを使用することができます。この技術は、クリーンでシンプルなHTMLとJSコード、および懸念の良好な分離を含むいくつかの利点があり

<button class="song" data-src="../sounds/1.mp3">Song 1</button> 
<button class="song" data-src="../sounds/2.mp3">Song 2</button> 

$('.song').click(function() { 
    audio.pause(); 
    audio.currentTime = 0; 
    audio.src = $(this).data('src'); 
    audio.play(); 
}); 

を。つまり、再生する別のファイルを追加する場合は、正しいdata属性を持つ別のHTML要素を追加するだけで、JSコードに触れることなく完了します。

はまた、あなたは、コンテンツがまだキャッシュされていない場合audio.play()前audio.load()をコールする必要があることに注意してください。