0

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

});

1 Answers1

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.

Robin James Kerrison
  • 1,727
  • 1
  • 15
  • 26
  • Almost works! Works perfectly (info updates according to the each item). One thing though, the mouseover now only works the *first* time the user mouseovers an item. Any clue why that happens? –  Dec 08 '15 at 10:39
  • Oh, yep, your `appendTo('body')`, moves the popup in the DOM. This is a problem the second time, because then it's no longer a sibling of the `a` element. Does it work without `appendTo('body')`? – Robin James Kerrison Dec 08 '15 at 10:47