jQuery選擇Rails循環生成的一個HTML元素

Question

我是Rails和jQuery的初學者。 我在Rails應用程序中有一個視圖，其中包含數據庫中每個用戶的圖片。 用戶照片是通過.each循環和HTML元素生成的。 我想要jQuery做到的是：當我將鼠標懸停在HTML元素之一上時，我希望它能夠擴展以包含一些內容。 但是我只希望擴展ITS內容，而不是所有其他具有相同類名的內容！ 我怎樣才能做到這一點？

這是視圖：

<ul class="thumbnails">
<% @users.each do |user| %>
    <li class="span2-thumb">
    <a href=<%= user_path(user) %> class="thumbnail">
      <img src=<%= user.photo_url(:thumb).to_s %>>
    </a>
  </li>

    <li class="span2-info hidden">
      <div class="thumbnail">
        <img src=<%= user.photo_url(:thumb).to_s %>>
        <p>
           Content...
        </p>
      </div>
    </li>

  <% end %>
<% end %>
</ul>

這是Javascript：

$('.span2-thumb').on({
    mouseenter: function(evt) {
        $('.span2-thumb').addClass('hidden');
        $('.span2-info').removeClass('hidden');
    }
});
$('.span2-info').on({
    mouseleave: function() {
        $('.span2-info').addClass('hidden');
        $('.span2-thumb').removeClass('hidden');
    }
});

一種選擇是為每個用戶圖像創建自定義類名稱。 通過將user.id附加到類名上，我可以做到這一點。 但是，我有一個問題，我無法編寫腳本來標識每個唯一的類名！

任何建議表示贊賞。 謝謝！

Answer 1

你去。 這應該工作：

抱歉，第一個答案很愚蠢。 我認為您應該嵌套兩個切換元素。

編輯您的標記：

<li class="span2-thumb">
    <a href="#" class="thumb">
      <img src="path/to/img">
    </a>
    <div class="thumbnail hidden">
      <img src="path/to/img">
      <p>
         Content...
      </p>
    </div>
</li>

使用此為您的js：

$(function() {
    $('.span2-thumb').on('mouseenter mouseleave', function() {
        $(this).children().toggleClass('hidden');
    });
});

Answer 2

純CSS版本 -盡量避免使用過多的JS

.span2-thumb:hover .thumb {
  display: none;
}
.span2-thumb:hover .thumbnail {
  display: block;
}
.span2-thumb .thumbnail {
  display: none;
}