Question

我刚刚开始学习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/

有什么想法吗？

Answer 1

如果我理解正确，您会尝试根据每次点击将视频移动到其他位置。如果那是对的，那么我相信这就是你要找的东西。对于每次点击，它会将数据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);
    });
});

Answer 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;
       }

   });
});

<强>样本

JSFinddle

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

2 个答案: