javascript - 动态添加类的jQuery if else语句

Question

我试图编写一个函数，根据 div 的当前类显示 2 个可能的工具提示中的 1 个，但我似乎无法让它工作。

两个课程都不断显示...

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

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