Question

Hey Fellow Developers，

1）我有一个悬停状态，显示翻转的文本。它工作正常，直到我复制代码。

图像重复后，它会显示所有翻转文本，而不是一次显示一个翻转文本。

2）任何人都可以做以下工作; 当点击“关注”和“图表”按钮时，我希望悬停文本从“关注”更改为“关注”，当点击返回时，更改回“跟随”悬停。

请参阅下面的现场演示 http://jsfiddle.net/w3N2f/13/

<script>

    $('.chart-interest-btn').click(function(){
        $(this).toggleClass('active');
    });

    $('.follow-interest-btn').click(function(){
        $(this).toggleClass('active');
    });



    $(".follow-interest-btn").hover(function(){
        $(".interests-follow-popup").show();
    }, function(){
        $(".interests-follow-popup").hide();
    })


    $(".chart-interest-btn").hover(function(){
        $(".interests-chart-popup").show();
    }, function(){
        $(".interests-chart-popup").hide();
    })
</script>

Answer 1

试试这个

if ($(this).hasClass('active')) {
    $('.interests-follow-popup').text("Following")
} else{
    $('.interests-follow-popup').text("Follow")
}

DEMO

Answer 2

尝试这种方式：

$(".follow-interest-btn").hover(function(){
    $(this).siblings(".interests-follow-popup").toggle();
});


$(".chart-interest-btn").hover(function(){
     $(this).siblings(".interests-chart-popup").toggle(); //Select only the siblings with the class
});

<强> Fiddle

您需要使选择器具体化，而不是提及可以出现在任何地方的通用类名。

类似于第2点你可以做到：

$('.follow-interest-btn').click(function(){
    var $this = $(this);
    $(this).toggleClass('active');
    $this.siblings('.interests-follow-popup').text(function(){ //Select only the siblings with the class and set the text
        return $this.is('.active') ? 'Following' : 'Follow'; // check if the element is active based on it swap the text.
    });
});

<强> Fiddle

Jquery悬停状态 - 文本更改

2 个答案: