Rails 5、jQuery、動的に作成されたアイテムにイベントを追加する

Question

私のソリューションは機能していますが、より良い、よりエレガントな方法があると思います。どんなアイデアも大歓迎です。

navbarドロップダウンメニューの項目にはアイコンが残っています。アイコンとアイテム名を別々のスパンに入れて、別々にスタイルを設定することができました。また、アイコンとリストアイテムの名前の背景色を変更する必要があるので、divでそれらをラップしました。背景を変更するjQueryの

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

：

ナビゲーションバーは、ドロップダウンメニュー内のリンクをレンダリング

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