jQuery выберите один элемент HTML, сгенерированный контуром Rails

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

Pure CSS версия - Я стараюсь, чтобы избежать чрезмерного JS, когда это возможно

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