javascript - jQuery Each Loop - 显示单个项目

Question

我认为我有一个产品循环，效果很好。

然后我编写了鼠标悬停弹出窗口(JS)的代码。弹出窗口显示所有产品的循环，而不是用户正在查看的单个产品。

可以教我如何解决这个问题吗？

哈姆尔:

#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);
    });

});

编辑:

class 而不是 id(名为“each”)

    $(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 元素。