jquery - 针对 1 个元素并非所有 jquery js

Question

我在网格中的跨度很少，我有一个小问题。当我悬停 1 个元素时，所有隐藏的跨度都被激活。我只想激活一个悬停。

                $('.tried-it').live('mouseover', function(){
                    $('.tried-times').fadeIn(500).addClass("show-me").removeClass("hide-me");
                });

                $(".tried-it").live('mouseout',function() { 
                    $(".tried-times").fadeOut(500).removeClass("show-me").addClass("hide-me");
                    return false; 

                });

和跨度：

<span class="tried-times hide-me">30 times</span>
<span class="tried-it"></span>

Answer 1

这似乎是一种奇怪的方式来构建你的元素，但如果它们一个接一个地放置，我会做类似的事情：

$(document).on({
    mouseenter: function(){
        $(this).prev('.tried-times').addClass("show-me")
                                    .removeClass("hide-me")
                                    .fadeIn(500);
    },
    mouseleave: function() { 
        $(this).prev('.tried-times').fadeOut(500)
                                    .removeClass("show-me")
                                    .addClass("hide-me");
    }
}, '.tried-it');​

这是一个小提琴

Answer 2

像这样的东西应该可以工作，只对触发事件的元素实例进行操作。请注意，选择器$(this)不是$('.tried-times')：

$('.tried-it').live('mouseover', function(){
    $(this).fadeIn(500).addClass("show-me").removeClass("hide-me");
});

$(".tried-it").live('mouseout',function() { 
    $(this).fadeOut(500).removeClass("show-me").addClass("hide-me");
    return false; 
});