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也远离＆＃34;哇＆＃34;）。有什么方法可以改善吗？谢谢！

Answer 1

当您使用相同的ID（icon-cont和name-cont创建元素循环时，它会创建重复的标识符，在HTML标识符中必须是唯一的。

您可以使用纯CSS实现它。

＆＃13;

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

＆＃13;

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

＆＃13;

Rails 5，jQuery，为动态创建的项添加事件

1 个答案: