2

jQuery の学習を始めたばかりで、解決方法がわからない問題に遭遇しました。

HTML5 ビデオがあり、ビデオをクリックしたときに上下のマージンを変更したいのですが、新しいクリックごとにマージンが異なって変更されます。

したがって、最初のクリックで margin-left が 120px から 580px に変更され、次のクリックで margin-left が 580px から 700px に変更され、次のクリックで margin-top が 0px から 100px に変更されてから、初期設定に戻ります。

今まで私は持っています：

$(document).ready(function (){
   $('#mask').click(function (){
       $('#mask').css('margin-left',"120px");
         $(this).css('margin-left',"580px");

   });
});

http://jsfiddle.net/bR9wy/

何か案は？

4

2 に答える 2

2

私の理解が正しければ、各クリックに基づいて動画を別の位置に移動しようとしています。それが正しければ、これがあなたが探しているものだと思います。クリックするたびに、データclicksが 1 ずつ増えます。追加などを使用して、クリック番号 4 にこれを追加できます}else if(c === 4){。

Fiddleまた、フィドルの HTML を修正し、いくつかの CSS を追加して、ボックスがよく見えるようにしました。

$(document).ready(function () {
    $('#mask').click(function () {
        var c = $(this).data('clicks') || 0;
        console.log(c);
        if (c === 0) {
            $(this).css('margin-left', "580px");
        } else if (c === 1) {
            $(this).css('margin-left', "700px");
        } else if (c === 2) {
            $(this).css('margin-top', "100px");
        } else if (c === 3) {
            $(this).css({
                marginTop: "0px",
                marginLeft: "120px"
            });
            c = -1;
        }
        $(this).data('clicks', ++c);
    });
});
于 2013-11-09T01:57:29.697 に答える
2

次のコードを確認してください。

$(document).ready(function (){
   var click = 0 ;
   $('#mask').click(function (){
       click++;
       switch(click){
           case 1:
            $(this).css({'margin-left':"580px", 
                         'margin-top':"100px"});
           break;
           case 2:
           $(this).css({'margin-left':"700px", 
                        'margin-top':"200px"});
           break;
           case 3:
           $(this).css({'margin-left':"120px", 
                       'margin-top':"0px"});
           default :
               click = 0;                        
           break;
       }

   });
});

デモ

JSフィンドル

于 2013-11-09T02:15:54.117 に答える