From e5ca640067cdfd16b6f4d84cac056acf209f1193 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=89?= <huan0016@gmail.com>
Date: Mon, 2 Oct 2023 06:44:37 +0800
Subject: [PATCH] =?UTF-8?q?=E9=AB=98=E4=BA=AE=E6=AD=A3=E5=9C=A8=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E7=9A=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 2 +-
 public/music.js   | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 5c3bd73..fa588e9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -34,7 +34,7 @@
                 console.log('播放音乐', item.name)
             },
             onstop: item => {
-                console.log('停止音乐', item.name)
+                console.log('停止音乐', item?.name)
             },
             onlike: (item, list) => {
                 console.log('喜欢音乐', item)
diff --git a/public/music.js b/public/music.js
index 0189ff5..9e59cf7 100644
--- a/public/music.js
+++ b/public/music.js
@@ -42,6 +42,9 @@ export default class MusicList {
             ul.music-list > li {
                 cursor: pointer;
             }
+            ul.music-list > li.play {
+                color: #02be08;
+            }
             ul.music-list > li.cache::marker {
                 color: #02be08;
                 font-size: 1em;
@@ -88,10 +91,13 @@ export default class MusicList {
                         if (event.target.dataset.play === 'play') {
                             event.target.dataset.play = 'stop'
                             event.target.innerText = '播放'
+                            this.ul.querySelector(`#${item.id}`).classList.remove('play')
                             this.stop()
                         } else {
                             event.target.dataset.play = 'play'
                             event.target.innerText = '停止'
+                            this.ul.querySelectorAll('li.play').forEach(li => li.classList.remove('play'))
+                            this.ul.querySelector(`#${item.id}`).classList.add('play')
                             this.play(item)
                         }
                     }