0

この例http://jsbin.com/avewul/2/では、要素をスライドさせる rcarousel jQuery プラグインを使用します

アイデアは、ホバーされたスライド要素の id 属性値によって、下の黒いタイトルのコンテンツを変更することです。それは最初のものの仕事です。

$(document).ready イベントを削除すると、すべて問題ありません。しかし、 $(document).ready イベント内で必要です

JavaScript:

$(document).ready(function($) {
    var J_text = $(".change").text();

    $(".slide").hover(function(){
        var J_id = $(this).attr("id");
        $(".change").text(J_id);
    }, function(){
        $(".change").text(J_text);
    });

});
4

4 に答える 4

2

これを使用するとうまくいくはずです：

$(document).ready(function($) {
    var J_text = $(".change").text();

    $("body").on('mouseenter', '.slide', function(){
      var J_id = $(this).attr("id");
      $(".change").text(J_id);
    }).on('mouseleave', '.slide', function(){
      $(".change").text(J_text);
    });
});

スライドの mouseenter および mouseleave イベントを body 要素にデリゲートします。このようにして、動的に追加された要素に対してもイベントが実行されます

于 2013-02-07T12:58:25.270 に答える
0

カルーセル プラグインは、スライド要素を動的に作成および削除するようです。ただし、新しく作成された要素には、ホバー リスナーがバインドされていません。

pageLoadedrcarousel のコールバックを使用して、イベントを再バインドできます。

function pageLoaded(event, data) {
    var target = $('.change');
    var text = target.text();

    $(this).hover(
        function() {
            target.text($(this).attr('id'));
        },
        function() {
            target.text(text);
        }
    );

    …
于 2013-02-07T12:47:49.963 に答える
0

オプション ( http://ryrych.github.com/rcarousel/#options )でコールバック関数を使用しpageLoadedて、スライドが移動するたびにホバー イベントをバインドする必要があります。rcarousel は、すべての新しいスライドですべてのイベントのバインドを解除しているようです。

ここに実用的なソリューションがあります: http://jsbin.com/upomaf/1

rcarousel のサンプル ファイルを使用しています ( <sript>HTML 部分の下部にある最後のファイル)。その場合、次をpageLoaded関数に追加できます。

$(this).hover(
    function() {
        $(".change").text($(".wrapper > div").attr("id"));
    },
    function() {
         $(".change").text(J_text);
    }
);
于 2013-02-07T12:58:20.620 に答える
0

試す、

$(".slide").on("hover", function() {
        var J_id = $(this).attr("id");
        $(".change").text(J_id);
    }, function(){
        $(".change").text(J_text);
});
于 2013-02-07T12:50:27.600 に答える