2

私は次のコードを持っています：

        $('.popUp').mouseover(function() {
            var divName = $(this).data("id");
            $('#' + divName).fadeIn();
        });

        $('.popUp').mouseout(function() {
            var className = $(this).data("id");
            $('#' + divName).fadeOut();
        });

カーソルを合わせたテキストの近くにポップアップが表示されるはずです。表示されるテキストは、ページの他の場所にある非表示のDIVに保存されます。DIVの名前をSPANタグのdata-id="divname"を介して渡します。私が何をしても、jQueryはテキストに反応しません。マウスオーバーではなく、ホバーし、クリックすることもできます。何もない。そこにalert（）を配置して、反応するかどうかを確認することでテストしましたが、反応することはありません。

SPANの1つの例を次に示します。

I am <span class="popUp" data-id="s1"><u>employed</u>, volunteering</span>, or 
<span class="popUp" data-id="s2"><u>associated</u></span>

私は何が間違っているのですか？:)

ありがとう！

4

4 に答える 4

3

divのマークアップを投稿していませんが、次のようなものを想定しています。

I am <span class="popUp" data-id="s1"><u>employed</u>, volunteering</span>, or 
<span class="popUp" data-id="s2"><u>associated</u></span>

<div id="s1">The s1 div</div>
<div id="s2">The s2 div</div>

変数名がから変更されclassNameたdivNameものは正常に動作します。

DEMO-デフォルト、変数名修正後

元のコードのコメントで述べたように、スクリプトがドキュメント対応ブロック内で実行されていることを確認し、jQuery参照がそこにあり有効であることを確認してください。

さらに、リンク間でかなり速くマウスオーバーしたときにアニメーションが不規則に動作することがわかった場合は、次のようにコードを更新できます。

$('.popUp').mouseover(function() {
    var divName = $(this).data("id");
    $('#' + divName).stop(true, true).fadeIn();
});

$('.popUp').mouseout(function() {
    var divName = $(this).data("id");
    $('#' + divName).hide();
});​

DEMO-stop()とを使用した代替コードhide()

私が追加/変更した唯一のこと（これはまったく必要ないかもしれません）はstop(true, true)、リンクを前後にすばやくマウスオーバーした場合に前のアニメーションを停止することです。

fadeOut() hide()また、リンク間をすばやく移動するときにアニメーションと衝突する可能性があるため、代わりにうまく機能する可能性があります。

これらは単なる提案であり、シナリオに直接適用されない場合があります。

于 2012-10-10T21:09:30.213 に答える
1

jsfiddleを作成しました。そしてそれはうまく機能しています。

変更されたコード：

JS：

$(document).ready(function(){
    $('.popUp').mouseover(function() {
                var divName = $(this).data("id");
                $('#' + divName).fadeIn();
            });

    $('.popUp').mouseout(function() {
            var divName = $(this).data("id");
            $('#' + divName).fadeOut();
        });

​});

HTML：

I am <span class="popUp" data-id="s1"><u>employed</u>, volunteering</span>, or <span class="popUp" data-id="s2"><u>associated</u></span> <div id=s2 style='display:none'> text text text text text text text text text </div> <div id=s1 style='display:none'> text text text text text text text text text </div></ p>

于 2012-10-10T21:06:25.923 に答える
1

これは、詳細がないとデバッグが困難です。

 $(document).on("mouseover", ".popup", function() {
    var id = $(this).data('id');
    $(id).fadeIn();
 }).on('mouseout', '.popup', function() {
    var id = $(this).data('id');
    $(id).fadeOut();   
 });

</ p>

私もこれを試しました

$(".popup").mouseover(function() {
var id = $(this).data('id');
    $(id).fadeIn();
 }).mouseout(function(){
var id = $(this).data('id');
    $(id).fadeOut();
 })

そしてそれは動作します。問題はおそらく.popupがdomreadyに存在しないためです（おそらくAJAXリクエストからロードされているのでしょうか？）。完全なコードが表示されない限り、確信は持てません。$（document）.on（）を含むコードは、99％の時間でうまく機能するはずです（統計は薄気味悪いから引き出された）

これがjsFiddleです：

http://jsfiddle.net/6Pp9w/

于 2012-10-10T21:13:12.487 に答える
0

あなたのコードでは：

$('.popUp').mouseover(function() {
   var divName = $(this).data("id");
    $('#' + divName).fadeIn();
});
$('.popUp').mouseout(function() {
    var className = $(this).data("id");
    $('#' + divName).fadeOut();
});

mouseoutイベントには、define classNameを使用しますが、divNameを使用します。divNameをclassNameに変更します。

于 2012-10-10T21:12:35.753 に答える