模板字符串-插值表达式-类class样式切换

<li class="${index == currentIndex ? : "playing" : ""}"></li>

//插值表达式
<span>0${index + 1}. ${item.name} - ${item.singer}</span>


<span class="fa ${index == currentIndex && !$('audio').get(0).paused ? "fa-pause-circle" : "fa-pause-circle"}></span>


--------------------------------------------------------

<span class="fa" id="playPauseIcon"></span>  

<script>  
  // 假设这些变量在某个地方被定义和更新  
  let index = 0; // 当前项的索引  
  let currentIndex = 0; // 当前选中的项的索引  
  
  // 模拟音频播放状态  
  let audioElement = document.querySelector('audio');  
  let isPlaying = false; // 假设这是从audioElement的某种状态推断出来的  
  
  // 更新span的类名  
  function updatePlayPauseIcon() {  
    let iconClass = (index == currentIndex && !isPlaying) ? "fa-play-circle" : "fa-pause-circle";  
    document.getElementById('playPauseIcon').className = "fa " + iconClass;  
  }  
  
  // 假设在某个时刻调用这个函数来更新图标  
  updatePlayPauseIcon();  
  
  // 如果需要监听音频播放状态变化，可以添加事件监听器  
  audioElement.addEventListener('play', function() {  
    isPlaying = true;  
    updatePlayPauseIcon();  
  });  
  
  audioElement.addEventListener('pause', function() {  
    isPlaying = false;  
    updatePlayPauseIcon();  
  });  
</script>