如何在JavaScript HAML中从标签名称获取id

Question

我用照片构建了Web App。我想在鼠标上方隐藏每张照片但当鼠标在其中一张照片上时，它会隐藏所有照片。我试图从标签名称在HAML使用JavaScript jQuery隐藏一张照片，但它没有返回任何id。这是我目前所尝试的:

HAML:

.centered
%table.table
%tbody
- @sorted_photos_array.each do |user_following_photos|
- user_following_photos.each do |photo|
%tr
%td
.p-3.border
.email #{@users.find(photo.user_id).email}
%img{:id => "image", :src => photo.image(:medium)}
%h3= photo.title
- break

JavaScript:

$(function() {
var id = document.getElementsByTagName("img")[0].id;
$(id).on("mouseover", function() {
$("img").hide();
});
});

Answer 1

你完全想错了。没有使用ID属性是jQuery初学者经常遇到的困扰。而且这种方法甚至不起作用，因为id在页面上必须是唯一的。

相反，使用css类或数据属性等属性来瞄准您想要增强其行为的元素，并使用this或event.target来获取触发事件的元素，并使用DOM遍历来获取子元素，兄弟元素或与之相关的任何其他元素。

.centered
%table.table
%tbody
- @sorted_photos_array.each do |user_following_photos|
- user_following_photos.each do |photo|
%tr
%td
.p-3.border
.email #{@users.find(photo.user_id).email}
%img.my-special-photo-thingy{ src: photo.image(:medium) }
%h3= photo.title`

$(function() {
$('.my-special-photo-thingy').on("mouseover", function(event) {
// this is bound to event.target in jQuery callbacks 
$(this).fade();
});
});

这里的一个问题是Turbo和turbollinks都使用AJAX进行页面替换，因此动态插入的元素不会附加事件处理程序。您可以通过使用事件委托来解决这个问题:

$(document, "mouseover", ".my-special-photo-thingy", function(event) {
// this is bound to event.target in jQuery callbacks 
$(this).fade();
});

另一个问题是，当用户的鼠标停留在元素上时，鼠标悬停事件会重复发生，你可以用CSS动画以更高效的方式做同样的事情。