1

各位开发者，

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>
4

2 回答 2

0

尝试这个

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

演示

于 2013-09-16T15:11:55.077 回答
0

试试这个方法：

$(".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
});

小提琴

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

对于第 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.
    });
});

小提琴

于 2013-09-16T15:14:32.707 回答