Clever Geek Handbook

Using javascript for only one item in a list

I have the following code (coffeescript) and I have rails creating a list of subscribed videos and I want the popup to only appear in the one I hover over. But since, since every video in the list has a class video subscription, no matter which course I am on, only the popup for the first is shown. What is the best way to define javascript in that I am looking for a popup id in the currently selected class (the class that I hover over the caption)?

$(document).ready ->
  $('.subscription-video').hover (->
    $('#popup').show()
  ), ->
    $('#popup').hide()
+3


source to share


2 answers


You can do this with DOM traversal. Assuming the tag subscription-video

and popup are in the same div:



$(document).ready ->
  $('.subscription-video').hover (->
    $(this).closest('.popup').show()
  ), ->
    $(this).closest('.popup').hide()
+2


source


Since you are using jQuery, you can try this:

$(document).ready(function(){

    $(document)
    .on("mouseenter",".subscription-video", function(e){             
        $(e.target).hide(300);
    });
    $(document)
    .on("mouseleave",".subscription-video", function(e){            
         $(e.target).show(300);
    });

});


Also known as event delegation

+1


source






More articles:


All Articles