Rails 5，jQuery，添加事件動態創建項目

Question

我有我的解決方案工作，但我相信會有更好，更優雅的方式。任何想法都非常受歡迎。

事情是，導航欄下拉菜單項有圖標留給它。我將圖標和項目名稱放在單獨的跨度中，以便我可以分別對它們進行設計。我也用一個div來包裝它們，因爲我需要改變 - 圖標和列表項名稱的背景顏色。

導航欄呈現在下拉菜單鏈接：

 <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的改變背景：

$(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', ''); 
    }); 
}); 

所以它的工作，尤其是jQuery的部分是一個有點笨拙（ HTML也離「哇」很遠）。任何方式來改善它？謝謝！

Answer 1

當您在爲同一ID循環創建元素即icon-cont和name-cont，它創建重複的識別碼，在HTML identifiersmust是唯一的。

您可以使用純CSS來實現它。

.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>