javascript - あまり多くの if ステートメントを使用せずにメディアの再生/一時停止を切り替えますか?

Question

次のようなウェブサイト用の曲のプレイリストを作成しています。

ただし、次のようなボタンを切り替えるときにユーザーが実行する可能性のあるすべての case ステートメントを実装する適切な方法を見つけるのに苦労しています。

• 1 つの再生ボタンのオンとオフを切り替える
• 1 つの再生ボタンをオンに切り替えてから、別の再生ボタンをクリックして、前の再生ボタンをオフに切り替える必要がある
• 等々。

現在、私のコード (以下) は、ユーザーが再生ボタンのオンとオフを切り替えてから別の再生ボタンをクリックした場合を除いて、すべてのケースで機能します。この特定のケースでは、最近クリックされたアイコンだけでなく、両方のアイコンが一時停止ボタンに切り替わります。これが発生する理由はわかっています。ID がlastPlayed古い再生ボタンに残っているため、トグルifステートメントがトリガーされるためです。

if私の質問は、考えられるすべての結果について特定の声明を出すことなく、これらすべてのケースをカバーする再生ボタンの切り替えを設定する簡単な方法はありますか?

より良い解決策を見つけるか、私の 1 つのバグを修正するかのどちらかが機能しますが、よりクリーンなコードが常に優先されます。助けてくれてありがとう!

var playCounter = 0;

function clickSongPlay(artist, title, url, imageURL, element) {

    //debugger;
    player.playlist.push(
        {
            title: title,
            artist: artist,
            file: url,
            imageURL: imageURL,
            howl: null
        }
    );

    //check to see if we need to resume the song
    if ($(element).hasClass("resumeSong") && $(".music-control").hasClass("ion-ios-play")) {
        console.log("resuming");
        /////////LINE BELOW RESUMES THE TRACK FROM CURRENT POSITION////////
        player.play();
        $(element).toggleClass("ion-ios-play ion-ios-pause");
        $(".resumeSong").removeClass("resumeSong");
        return;
    }

    //if a song is playing and the pause button is clicked, pause the track
    if ($(element).hasClass("ion-ios-pause")) {
        console.log("pausing");
        player.pause();
        $(element).toggleClass("ion-ios-pause ion-ios-play");
        $(element).addClass("resumeSong");
        return;
    }

    //start playing a new song
    if ($(element).hasClass("ion-ios-play") && !$(element).hasClass("resumeSong")) {

        if ($("#lastPlayed") && !playCounter == 0) {
            console.log("here is a new song");
            $("#lastPlayed").toggleClass("ion-ios-pause ion-ios-play")
            $(".music-control").removeAttr("id", "lastPlayed");
        }

        console.log("new song");
        ///////LINE BELOW LOADS THE NEW SONG//////////////
        player.skipTo(player.playlist.length - 1);
        $(element).toggleClass("ion-ios-play ion-ios-pause");
        $(element).attr("id", "lastPlayed");
        playCounter += 1;
        return;
    }

}

特定の曲の div の HTML は次のとおりです。

<div><i class="icon ion-ios-play music-control" onclick="clickSongPlay('@song.Artist','@song.Title','@song.URL','@song.Album.ImageURL', this);"></i></div>