JQueryがHTMLリスト上で動的にmouseoverを使用する

Question

タイトルを最善の方法で言い表せなかったのは残念ですが、ここでは私が解決しようとしている問題があります。私はあなたがリストのインデックスから曲を選択することができますオーディオプレーヤーがあります。そのインデックスでは、曲をクリックするとポップアップする説明もあります。私はそれをホバリングに転送するようにしていますので、リスト内のどの曲でも上げられると、その説明が表示され、マウスを動かすとそれも消えてしまいます。

JS -

function audioPlayer(){ 
     var descriptions = ["Sad Man's Tongue. . .Description to follow", 
     "Breed. . .Description to follow", 
     "Everything Zen. . .Description to follow", 
     "Ain't It Funky Now Pt2. . .Description to follow", 
     "Killing All The Joy. . .Description to follow", 
     "OWS. . .Description to follow", 
     "X1 Alpha. . .Description to follow", 
     "Low. . .Description to follow", 
     "Reconsider Baby. . .Description to follow", 
     "4Lee. . .Description to follow", 
     "Show Biz Kids. . .Description to follow" 
    ]; 

     var currentSong = 0; 
     $("#audioPlayer")[0].src = $("#playlist li a")[0]; 
     $("#playlist li a").click(function(e){ 
      e.preventDefault(); 
      $("#audioPlayer")[0].src = this; 
      $("#audioPlayer")[0].play(); 
      $("#playlist li").removeClass("current-song"); 
      currentSong = $(this).parent().index(); 
      $(this).parent().addClass("current-song"); 
      let currentDescription = descriptions[currentSong] 
      $('#song-info').css('display', 'inline'); 
      $('#song-info').text(currentDescription); 
     }); 

    $("#audioPlayer")[0].addEventListener("ended", function(){ 
    $("#playlist li").removeClass("current-song"); 
     $('#song-info').css('display', 'inline'); 
     $('#song-info').text("Time for the next song ...turn it up LOUDER"); 
     $("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href; 
     $("#audioPlayer")[0].play; 
    }); 

    $("#audioPlayer")[0].addEventListener("mouseover", function(){ 
     let hoverDescription = description[$(this).index()]; 
     document.getElementById("song-hover-info").style.zIndex = "11"; 
     $('#song-hover-info').css('display', 'inline'); 
     $('#song-hover-info').text(hoverDescription); 
    }); 
    $("#audioPlayer")[0].addEventListener("mouseleave", function(){ 
     document.getElementById("song-hover-info").style.zIndex = "9"; 
    }); 

    }// JavaScript Document 

CSS -

.current-song{ 
      color:aqua; 
} 
    .footer{ 
     position: fixed; 
     text-align: center; 
     bottom: 0px; 
     width: 100%; 
    } 
    .blacktextbg{ 
     background-color: #000000; 
    } 
    #playlist{ 
     font-size: 24; 
    } 
    .fader{ 
     position: absolute; 
     height: 100%; 
     width: 100%; 
     z-index: -1; 
     background-size: 100% 100%; 
     background-repeat : no-repeat; 
    } 
    #song-info{ 
     padding: 10px; 
     color: black; 
     background-color: white; 
     border: black 2px; 
     width: 25%; 
     z-index: 10; 

    } 
    #song-hover-info{ 
     padding: 10px; 
     color: black; 
     background-color: white; 
     border: black 2px; 
     width: 25%; 
     z-index: 9; 
    } 

関連するHTML

<audio src="" controls id="audioPlayer"> 
    Sorry, your browser doesn't support html5! 
</audio> 
<ul id="playlist"> 
     <li><a href="sounds/Sad%20Mans%20Tongue.mp3"><span class="blacktextbg">Sad Man's Tongue</span></a></li> 
    <li><a href="sounds/breed.mp3"><span class="blacktextbg">Breed</span></a></li> 
    <!--<li><a href="sounds/creep.mp3">Creep</a></li>--> 
    <li><a href="sounds/Everything%20Zen.mp3"><span class="blacktextbg">Everything Zen</span></a></li> 
    <li><a href="sounds/Ain't%20It%20Funky%20Now%20Pt%202.mp3"><span class="blacktextbg">Ain't It Funky Now Pt 2</span></a></li> 
    <!--<li><a href="sounds/once.mp3">Once</a></li>--> 
    <li><a href="sounds/killing all the joy.mp3"><span class="blacktextbg">Killing All The Joy</span></a></li> 
    <!--<li><a href="sounds/torn.mp3">Torn</a></li> 
    <li><a href="sounds/aftermidnight.mp3">After Midnight</a></li>--> 
    <li><a href="sounds/X1BetaOWS.mp3"><span class="blacktextbg">OWS</span></a></li> 
    <li><a href="sounds/X1 Alpha.mp3"><span class="blacktextbg">X1 Alpha</span></a></li> 
    <!--<li><a href="sounds/undome.mp3">Undo Me</a></li>--> 
    <li><a href="sounds/Low%20.mp3"><span class="blacktextbg">Low</span></a></li> 
    <!--<li><a href="sounds/Cumbersome.mp3">Cumbersome</a></li> 
    <li><a href="sounds/Thru%20Your%20Window%20.mp3">Thru Your Window</a></li>--> 
    <li><a href="sounds/Reconsider%20Baby.mp3"><span class="blacktextbg">Reconsider Baby</span></a></li> 
    <li><a href="sounds/4lee.mp3"><span class="blacktextbg">4LEE</span></a></li> 
    <li><a href="sounds/show%20biz%20kids.mp3"><span class="blacktextbg">Show Biz Kids</span></a></li> 
    <!--<li><a href="sounds/show%20biz%20guitar.mp3">Show Biz Guitar</a></li> 
    <li><a href="sounds/Voodoo%20Child.mp3">Voodoo Child</a></li> 
    <li><a href="sounds/saveme.mp3">Save Me</a></li>--> 
</ul> 
<script src="audioPlayer.js"></script> 
<script> 
    audioPlayer(); 
</script> 
<div id="song-info"> 
    Select a song above and turn it up LOUD 
</div> 
<div id="song-hover-info"> 
</div> 

配列記述は、個々の曲の説明を保持しています。

Zインデックスは、曲情報を取りたくないため、曲が終了した後に目的を果たします。ホバーがあるときにホバー情報が表示されるようにして、最初の解決策を思いつきました。

Answer 1

UL LIのhtml構文がユーザーのカーソルを移動するコードの領域である場合、以下のコードは、ユーザーがLI要素の1つにカーソルを置いたときを検出する機能を提供します。

$('#playlist').on({ 
    mouseenter: function() { 
     alert('mouseenter - hovered'); 
    }, 
    mouseleave: function() { 
     alert('mouseleave - no hover'); 
    } 
}, 'li'); 

Answer 2

このコード

var descriptions = ["Sad Man's Tongue. . .test1", 
    "Breed. . .test2", 
    "Everything Zen. . .test3", 
    "Ain't It Funky Now Pt2. . .test4", 
    "Killing All The Joy. . .test5", 
    "OWS. . .test6", 
    "X1 Alpha. . .test7", 
    "Low. . .test8", 
    "Reconsider Baby. . .test9", 
    "4Lee. . .test10", 
    "Show Biz Kids. . .test11"] 

    $("li").hover(function() {        
     var i=0; 
     while (i<descriptions.length) 
     { 
     if($(this).text() == descriptions[i].split(". . .")[0].toString()) 
     { 
      document.getElementById("song-hover-info").innerHTML = descriptions[i].split(". . .")[1]; 
     } 
     i+=1; 
     } 

     });