Question

在我看来，我有一个产品循环，效果很好。

然后我编写了mouseover-popup（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);
    });

});

编辑：

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个元素。

jQuery Each循环 - 显示单个项目

1 个答案: