jQuery Каждая петля - отображает отдельный элемент

Question

У меня есть петля продуктов на мой взгляд, которая отлично работает.

Затем я закодировал всплывающее окно мыши (JS). Всплывающее окно отображает цикл всех продуктов, а не отдельный продукт, который пользователь просматривает.

В любом случае, научите меня, как это решить?

Haml:

#product_view 
- @products.each do |product| 
    .product_each 
     .product_image 
      = link_to (image_tag product.image.url(:tiny)), product, class: "each", popup: true 
     .pop-up 
      %poptitle= product.title 

JS:

$(function() { 
    var moveLeft = -100; 
    var moveDown = -150; 

    $('a#link').hover(function(e) { 
     $('.pop-up').show() 
      .css('top', e.pageY + moveDown) 
      .css('left', e.pageX + moveLeft) 
      .appendTo('body'); 
    }, function() { 
     $('.pop-up').hide(); 
    }); 

    $('a#link').mousemove(function(e) { 
     $(".pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft); 
    }); 

}); 

EDIT:

class вместо id (названный "каждый")

$(function() { 
    var moveLeft = -100; 
    var moveDown = -150; 

    $('a.each').hover(function(e) { 
    $('.pop-up').show() 
     .css('top', e.pageY + moveDown) 
     .css('left', e.pageX + moveLeft) 
     .appendTo('body'); 
    }, function() { 
    $('.pop-up').hide(); 
    }); 

    $('a.each').mousemove(function(e) { 
    $(".pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft); 
    }); 

}); 

Answer 1

Где вы используете $('.pop-up'), вы получаете список всех элементов с классом pop-up на странице. Вы должны использовать $(this).parent().find('.pop-up'), чтобы найти дочерних элементов .pop-up элементов родительского элемента.