jquery - jQuery:每次新点击都会不同地改变CSS

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

我有一个html5视频，并希望在单击视频时更改其上下边距，但是每次单击新按钮都会改变边距。

因此，第一次单击将左边距从120px更改为580px，将其从580px更改为700px，将其单击的空白顶部从0px更改为100px，然后返回初始设置。

到目前为止，我有：

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

   });
});

http://jsfiddle.net/bR9wy/

有任何想法吗？

最佳答案

如果我理解正确，则您正在尝试根据每次点击将视频移至其他位置。如果是正确的话，那么我相信这就是您想要的。对于每次单击，它将使数据clicks增加一。您可以使用添加}else if(c === 4){的方式将其添加到第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);
    });
});