jQuery:每次新的点击都会以不同的方式改变 CSS

Question

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

我有一个 html5 视频，希望在点击该视频时更改其底部和顶部边距，但每次新点击都会以不同的方式更改边距。

因此，第一次单击将左边距从 120 像素更改为 580 像素，下一次单击将边距从 580 像素更改为 700 像素，下一次单击将上边距从 0 像素更改为 100 像素，然后返回到初始设置。

到目前为止我已经:

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

   });
});

http://jsfiddle.net/bR9wy/

有什么想法吗？

Answer 1

如果我理解正确的话，您正在尝试根据每次点击将视频移动到不同的位置。如果这是正确的，那么我相信这就是您正在寻找的。对于每次点击，数据点击都会增加一。您可以通过添加 }else if(c === 4){ 等来添加第 4 次点击。

Fiddle我还修复了 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);
    });
});