jQuery动态添加类的其他陈述

Question

我试图编写一个函数，该函数根据div的当前类显示2个可能的工具提示之一，但是我似乎无法使其正常工作。

这两堂课都不断显示...

我已经做了一个小提琴来解释我的问题，因为代码非常庞大...

http://jsfiddle.net/QfrGc/

$('.row').hover(function(){
    if(!$(this).hasClass('active')) {

            $(this).hover(function(){

                //Click to expand
                tip = $('.t1');
                tip.show(); 

            });


    } else {

        $(this).hover(function(){

                //Click to drag
                tip = $('.t2');
                tip.show(); 

            });

    };
});

Answer 1

如果存在一个类，则将附加第二个hover事件。 这只会发生一次-并非每次都按您期望的那样进行。

只需检查一下，然后在第一个悬停窗口内执行正确的操作

$('.row').hover(function(){
  var tipSelector = $(this).hasClass('active') ? '.t1' : '.t2';
  $(tipSelector).show();
});

实时示例： http ： //jsfiddle.net/QfrGc/1/

您可能还打算在鼠标移开时隐藏工具提示。 如果是这样，可以扩展到

$('.row').hover(function(){
  var tipSelector = $(this).hasClass('active') ? '.t1' : '.t2';
  $(tipSelector).show();
},function(){
  var tipSelector = $(this).hasClass('active') ? '.t1' : '.t2';
  $(tipSelector).hide();
});

实时示例： http ： //jsfiddle.net/QfrGc/2/

Answer 2

您不需要附加新的悬停事件。 我已经修改了您的代码：

$('.row').hover(function(){
    if(!$(this).hasClass('active')) {
        //Click to expand
        tip = $('.t1');
        tip.show(); 
    } else {
        //Click to drag
        tip = $('.t2');
        tip.show(); 
    };
});