Question

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

两个班级都不断展示......

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

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

jQuery if else语句为动态添加类

2 个答案: