0

誰かがこれを見て、私が間違っていることを教えてもらえますか？これはクラスmove.upのスパンで、クリックする.content-wrapperと要素が移動し、.move.upクラス名が.move.dwn 後でmove.dwn.click(function()開始するように変更されますが、その時点まで到達できません。なぜですか？

 <style type="text/css">
    .content-wrapper {
        height:100px;
        width:100px;
        background-color:orange;
        position:relative;
    }
    span.move {
        background-color:fuchsia;
        cursor:pointer;
    }
</style>

<span class="move up">click here</span>
<div class="content-wrapper"></div>

<script type="text/javascript">
    $(document).ready(function() {

        $('.move.up').click(function() {
            alert("up");
            $('.content-wrapper').animate({'left': '+=568px'}, 'slow');
            $(this).removeClass('up');
            $(this).addClass('dwn');
        });

        $('.move.dwn').click(function() {
            alert("dwn");
            $('.content-wrapper').animate({'left': '-=568px'}, 'slow');
            $(this).removeClass('dwn');
            $(this).addClass('up');
        });
    });

</script>
4

4 に答える 4

1

アイテムがドームに入る前にクリックイベントを追加しています。代わりに、クリックイベントリスナーを親に追加すると、バブルが発生したときに実行されます。

$(document).ready(function() {
    $(document).on('click', '.move.up', function(){
        alert("up");
        $('.content-wrapper').animate({'left': '+=568px'}, 'slow');
        $(this).removeClass('up');
        $(this).addClass('dwn');
    }).on('click', '.move.dwn', function(){
        alert("dwn");
        $('.content-wrapper').animate({'left': '-=568px'}, 'slow');
        $(this).removeClass('dwn');
        $(this).addClass('up');
    });
});
于 2013-01-24T16:18:05.657 に答える
1

$('.move.dwn').click(function() {ページの読み込み時に存在する場合と存在しない場合がある要素に関連付けられているため 、$('.move.dwn')ドキュメントの読み込み時に使用できる別の要素にバインドする必要があります。以下のように両方の機能を変更します

<script type="text/javascript">
$(function() {
    $(body).on('click', '.move.up', function() {
        alert("up");
        $('.content-wrapper').animate({'left': '+=568px'}, 'slow');
        $(this).removeClass('up');
        $(this).addClass('dwn');
    });

    $(body).on('click', '.move.down', function() {
        alert("dwn");
        $('.content-wrapper').animate({'left': '-=568px'}, 'slow');
        $(this).removeClass('dwn');
        $(this).addClass('up');
    });
 });
</script>
于 2013-01-24T16:19:05.320 に答える
1

どのjQueryバージョンを使用していますか？

1.8バージョンを使用している場合、これは次の場合に役立ちます。

$('.move').on("click", function() {
    if($(this).hasClass('up')) {
         $('.content-wrapper').animate({
            'left': '+=568px'
        }, 'slow');
        $(this).removeClass('up');
        $(this).addClass('dwn');
    }
    else {
        $('.content-wrapper').animate({
            'left': '-=568px'
        }, 'slow');
        $(this).removeClass('dwn');
        $(this).addClass('up');
    }

});

例（見やすくするために距離を100ピクセルに変更）：http： //jsfiddle.net/XWyZD/1/

于 2013-01-24T16:19:09.677 に答える
0

問題は、.click（）関数が関連付けられている要素を更新しないことにあります。幸い、jQueryにはon（）（以前はlive（））でこれを解決するソリューションがあります。これにより、イベントが動的にバインドされ、更新後もクラスで選択されます。

これを試して：

<script type="text/javascript">
$(document).ready(function() {

    $('.move.up').on('click', function() {
        alert("up");
        $('.content-wrapper').animate({'left': '+=568px'}, 'slow');
        $(this).removeClass('up');
        $(this).addClass('dwn');
    });

    $('.move.dwn').on('click', function() {
        alert("dwn");
        $('.content-wrapper').animate({'left': '-=568px'}, 'slow');
        $(this).removeClass('dwn');
        $(this).addClass('up');
    });
});

于 2013-01-24T16:19:23.953 に答える