0

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

            });

    };
});
4

2 に答える 2

1

hoverクラスが存在する場合は、2 番目のイベントを添付しています。これは 1 回発生します。期待どおりにホバリングされるたびに発生するわけではありません。

チェックを行い、最初のホバー内で正しい動作を行うだけです

$('.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/

于 2013-01-31T17:01:52.710 に答える
0

新しいホバー イベントを添付する必要はありません。私はあなたのコードを変更しました：

$('.row').hover(function(){
    if(!$(this).hasClass('active')) {
        //Click to expand
        tip = $('.t1');
        tip.show(); 
    } else {
        //Click to drag
        tip = $('.t2');
        tip.show(); 
    };
});
于 2013-01-31T17:01:45.090 に答える