2

我刚开始学习 jQuery，遇到了一个我不知道如何解决的问题。

我有一个 html5 视频，并且想要在单击视频时更改其底部和顶部边距，但每次新单击都会以不同方式更改边距。

因此，第一次单击将 margin-left 从 120px 更改为 580px，下一次单击从 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一个。您可以通过使用添加等添加到此点击数 4 }else if(c === 4){。

小提琴我还修复了小提琴中的 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;
       }

   });
});

演示

JSFindle

于 2013-11-09T02:15:54.117 回答