0

Firefox、Safari、IE9 で jquery が動作するコードをいくつか書きました。しかし、クロムはそれが好きではありません。Chrome コンソールに明らかなメッセージは表示されません。私は壁にぶつかっています。うまくいけば、誰かが光を当てることができます。スクリプトは、いくつかのツールチップを表示/非表示にするだけです。何か案は？ここでフィドルしますが、コードを変更しても動作は変わりません。

http://jsfiddle.net/qAfwJ/

$(document).ready(function(){
    //custom toolTip Written by CASherwood but not working in ie9/chrome
        var ShowId;
        var id;
        var contentholder = $(".contentBox");
        var toolTip = $(".info");
        var idHashString = '#info';
        var idString = 'id';

            function showToolTip(name, id){
                  id = name + id;
                  $(id).fadeIn(1000);
            }

            function hideToolTip(name, id){
                  id = name + id;
                  $(id).fadeOut(1000);
            }

        $(toolTip).mouseover(function(){
                ShowId = $(this).attr(idString);
                showToolTip(idHashString, ShowId);
        });

        $(contentholder).mouseleave(function(){
            ShowId = $(this).find('.info').attr(idString);
            hideToolTip(idHashString, ShowId);
        });


});
4

4 に答える 4

2

ここにはいくつかのことがあります、あなたは変数を設定していますvar toolTip = $(".info");

次に、この同じ変数を使用して関数を追加します。あなたがここでしていることは実際には

$($(".info")).mouseover(

それ以外の

var toolTip = $(".info");
toolTip.mouseover(

また、あなたは使用を検討するかもしれません

jquery.hover(handlerIn(eventObject) , handlerOut(eventObject)  );

http://api.jquery.com/hover/

于 2012-11-08T11:07:34.337 に答える
1

ここで気付いていることの1つは、jQueryセレクターでいくつかの要素を2回ラップしていることです。

var contentholder = $(".contentBox");
$(contentholder).mouseleave(function(){
  ...
});

基本的に評価されるのはこれです-

$($(".contentBox"))

見た目はあまり良くなく、期待どおりに機能するかどうかはわかりません。たとえそうだとしても、ブラウザ間の互換性の問題が発生する可能性があり、これがあなたが経験していることだと思います。すでに要素をキャプチャしていて、セレクターを文字列として格納しているだけではない場合は、要素を$構文で再度ラップする必要はありません。

var contentholder = $(".contentBox");
contentholder.mouseleave(function(){
  ...
});

文字列と変数からセレクターを作成する場合は、これと同様の方法で作成する必要があります-

var elementId = 'the_elements_id';
$('#'+elementId).on('click',handler);
于 2012-11-08T11:03:53.573 に答える
1

私は変更することから始めます

        $(toolTip).mouseover(function(){
                ShowId = $(this).attr(idString);
                showToolTip(idHashString, ShowId);
        });

        $(contentholder).mouseleave(function(){
            ShowId = $(this).find('.info').attr(idString);
            hideToolTip(idHashString, ShowId);
        });

に

        toolTip.mouseover(function(){
                ShowId = $(this).attr(idString);
                showToolTip(idHashString, ShowId);
        });

        contentholder.mouseleave(function(){
            ShowId = $(this).find('.info').attr(idString);
            hideToolTip(idHashString, ShowId);
        });

ツールチップとコンテンツホルダー変数はすでにjqueryオブジェクトであるためです。

于 2012-11-08T11:04:05.953 に答える
0

よくわかりませんし、テストしていませんが、2 つの関数 (showToolTip()およびhideToolTip()) を前後に移動しようとする$(function(){}); と、グローバル関数ではなく何らかの内部関数と見なされる可能性があり、それが問題になる可能性があります。

于 2012-11-08T11:06:37.830 に答える