Rails 5, jQuery, Ereignis zu dynamisch erstellten Elementen hinzufügen

Question

Ich habe meine Lösung funktioniert, aber ich glaube, es gäbe eine bessere, elegantere Art und Weise. Irgendwelche Ideen sind sehr willkommen.

Die Sache ist, dass Navbar Drop-Down-Menü-Elemente Symbole übrig hat. Ich habe Icon- und Objektnamen in separate Bereiche eingefügt, damit ich sie separat stylen kann. Ich habe auch die mit einem div umwickelt, da ich die Hintergrundfarbe von beiden ändern muss - Symbol und Listenelementname, wenn es sich überlagert.

Navbar macht Links in Drop-Down-Menü:

 <ul class="dropdown-menu"> 
     <% @categories.each do |cat| %> 
      <li> 
      <%= link_to cat do %> 
      <div class="main-cont"><span id="icon-cont"><i class="glyphicon glyphicon glyphicon-tag"></i></span><span id="name-cont"><%= cat[:name] %></span></div> 
      </li> 
      <% end %> 
     <% end %> 
     </ul> 

jQuery den Hintergrund zu ändern:

$(document).ready(function(){ 
    $('.main-cont').on('mouseover', function(){ 
    $(this).find('#icon-cont').css('background-color', 'yellow'); 
    $(this).find('#name-cont').css('background-color', 'yellow'); 
    }); 
    $('.main-cont').on('mouseout', function(){ 
    $(this).find('#icon-cont').css('background-color', ''); 
    $(this).find('#name-cont').css('background-color', ''); 
    }); 
}); 

So macht es die Arbeit, vor allem aber jQuery Teil ein bisschen ungeschickt ist (HTML ist auch weit weg von "wow"). Irgendwelche Möglichkeiten, es zu verbessern? Vielen Dank!

Answer 1

Da Sie Element in Schleife mit derselben ID erstellen, d. H. icon-cont und name-cont, erstellen Sie doppelte Bezeichner, In HTML-Bezeichner muss eindeutig sein.

Sie können es mit reinem CSS erreichen.

.main-cont:hover { 
 
    background-color: yellow 
 
}

<ul class="dropdown-menu"> 
 
    <li> 
 
    <div class="main-cont"><span class="icon-cont">loren icon<i class="glyphicon glyphicon glyphicon-tag"></i></span><span class="name-cont">loren name</span> 
 
    </div> 
 
    </li> 
 
<li> 
 
    <div class="main-cont"><span class="icon-cont">ipsum icon<i class="glyphicon glyphicon glyphicon-tag"></i></span><span class="name-cont">ipsum name</span> 
 
    </div> 
 
    </li> 
 
</ul>