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 中标识符必须是唯一的。

您可以使用纯 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>