jQuery Each循环-显示单个项目

Question

I have a loop of products in my view, which works great.

Then I coded the mouseover-popup (JS). The popup displays a loop of all the products, rather than the individual product the user is viewing.

Could anyway teach me how to solve this?

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 instead of id (named "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

Where you're using $('.pop-up') , you're getting a list of every element with the class pop-up on the page. You should use $(this).parent().find('.pop-up') to find child .pop-up elements of each link's parent.