Question

我正在使用JS制作音乐网站的脱机应用程序，并且正在使用数组处理歌曲队列。我添加了带有跳过按钮的歌曲块，以便用户可以选择要跳过的歌曲，而不会向另一个垃圾按钮发送垃圾邮件，后者仅允许他们跳过队列的第一首歌曲。问题是，将数组与所选歌曲的索引拼接在一起，以便用户跳过，从而删除其余的歌曲。

示例数组：["songA","songB","songC","songD","songE"]

如果用户选择跳过songC，则歌曲队列将变为["songA","songB"]，并且将songC转换为songE，但实际上预期结果应为["songA","songB","songD","songE"]。

我不知道代码有什么问题，并且我搜索了与此问题类似的主题，但仍然没有结果。我对JS还是陌生的，我的代码有点粗糙，但是我很确定这不是问题的根源。

JS：

//function of skip buttons on song blocks
songPlaylist.addEventListener("DOMNodeInserted", function() { 
    iconList = document.querySelectorAll(".deleteIcon");
    iconList.forEach(function(element) {
        element.addEventListener('click', function() {  
            var nameOfSong = this.parentNode.childNodes[0].dataset.name;
            var indexByName = songQueue.indexOf(nameOfSong);
            var selectedBlock = this.parentNode;              

            if (songQueue.length == 1) {
                songQueue.shift();
                songPlaylist.removeChild(songPlaylist.firstChild);
                var emptyMsgSpan = document.createElement("div");
                emptyMsgSpan.className += "emptyMsgSpan";
                var emptyMsg = document.createTextNode("Playlist is empty! How 'bout adding some music?");
                emptyMsgSpan.appendChild(emptyMsg);
                document.getElementById("playlistContainer").appendChild(emptyMsgSpan);        
                setTimeout(function() {
                    audioPlayer.src = "";
                }, 1000);
            } else {
                songQueue.splice(indexByName,1); // <---  press first block output delete everything
                                                //        press any block after first deletes everything beneath it
                songPlaylist.removeChild(selectedBlock);    
                for (var blockIndex = indexByName; blockIndex <= songQueue.length; blockIndex++) {
                    document.getElementById("playlistContainer").children[blockIndex].childNodes[1].dataset.index -= 1;
                }
            };
        });
    });
});

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="index.css">
    <link href="https://fonts.googleapis.com/css?family=Bai+Jamjuree" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Jost&display=swap" rel="stylesheet">
    <!--<div>Icons made by <a href="https://www.flaticon.com/authors/roundicons" title="Roundicons">Roundicons</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>--> 
<title>Mue - Custom Playlist</title>
</head>
<body>
    <div id="bg">
        <div class="titleBar">
            <button style="background: none; border: none; cursor: pointer;" onclick="location.reload(); return false;">
               <span>MUE</span>
            </button>
        </div>
        <div class="songNameDisplay">
            <span id="nowPlaying"></span>
        </div>
        <div class="trackContainer">
            <div class="btn play"></div>
            <div class="audioTrack">
                <div class="trackBtn"></div>
            </div>
            <div id="skipBtn">
                <div class="triangle1"></div>
                <div class="triangle2"></div>
                <div class="rect"></div>
            </div>
        </div>
        <button id="fileBtn" class="fileBtn"><span>Upload</span></button>
    </div>
    <audio id="audioPlayer" controls autoplay></audio>
    <input type="file" id="file" />
    <div id="playlistContainer"></div>
</body>   
<script src="index.js"></script>
<script>
    const bg = document.getElementById("bg");

    window.addEventListener('scroll' , function() {
        let offset= window.pageYOffset;
        bg.style.backgroundPositionY = offset * 0.5 + "px";
    });
    </script>

</html>

谢谢。

拼接/删除所选数组元素会删除所选元素之后的其他元素

0 个答案: