6

クリック関数を使用して記述したこのjQueryコードがあります。

コードはjQuery1.7.2で動作している必要があります。

ここにjsfiddleを設定しています：http：//jsfiddle.net/7MpTa/1/

$(document).ready(
function () {
    $(".balloons a").hover(
        function() {
            $(this).next('.popups').addClass("shown");
        },
        function() {
            $(this).next('.popups').removeClass("shown");
        }
    );
}

）;

クリック機能をホバーに切り替えると、機能します。動作しないのはクリック機能自体だけです。バインドしてライブに変更しようとしましたが、成功しませんでした。

これがホバー動作のデモです：http：//jsfiddle.net/8HL8k/1/

なぜそれが機能しないのか誰かが知っていますか？

編集 皆さんの回答に感謝します。それらはすべて明らかにうまく機能します。ただし、これらの変更をWebサイトに実装する場合、イベントはまったくトリガーされません（FF、IE7 +、Chrome、Opera、Safariでテスト済み）。クラス（バルーンとポップアップ）への参照は他にまったくないので、何が干渉を引き起こす可能性があるのか​​わかりません。厳格なNDAポリシーのため、ウェブサイトへのリンクを投稿できません。これらはすべて順序付けられていないリスト（ul）内にあります。このHTML構文が原因である可能性がありますか？もしそうなら、それを回避する方法はありますか？コードはサイト全体で何百ものスライドショーに使用されているため、内部にとどまる必要があるためです。

また、アンカーがクリック時にアラートを送信するようにして、トリガーされるかどうかを確認しましたが、トリガーされませんでした。

記述されたスクリプトは、ヘッド内またはその後のjQuery 1.7.2参照の前、またはドキュメントの完全な下部で、タグの前に呼び出す必要がありますか？

4

3 に答える 3

6

toggle()代わりに使用できますclick()：

$(".balloons a").toggle(
    function() {
        $(this).next('.popups').addClass("shown");
    },
    function() {
        $(this).next('.popups').removeClass("shown");
    }
);

ここでわかるように: http://jsfiddle.net/darkajax/tmzt7/

ただし、jQuery 1.8 の時点で廃止され、1.9 で削除されたことに注意toggle()してください。ただし、1.7.2 を使用しているため、とにかく動作するはずです...

しかし、より良い解決策は次を使用することtoggleClass()です:

$(".balloons a").click(
    function() {
        $(this).next('.popups').toggleClass("shown");
    }
);

ここでわかるように: http://jsfiddle.net/darkajax/GeSmx/

編集：2番目の質問/問題の一部に答えると、jQuery参照はそれを使用するすべてのメソッド/関数の前にある必要があります...

于 2013-03-13T15:49:58.883 に答える
3

ホバーはオンとアウトの機能を持ちますが、クリックは 1 つの機能しか持ちません。

$(document).ready(function () {
    $(".balloons a").click(function() {
         $(this).next('.popups').toggleClass("shown");
    });
});

toggleClassクラスの追加と削除から一歩踏み出します。

于 2013-03-13T15:52:19.713 に答える
1

使用しtoggle()ないclick

ワーキングデモ

于 2013-03-13T15:51:45.230 に答える