jquery - 拨动开关

如何在按钮从中间位置开始的情况下进行拨动开关。然后单击将为左位置属性设置动画，以便该按钮位于左侧。再次单击将使位置重新回到中间位置。第三次单击会将按钮向右移动。第四次单击将其移回中间。

的HTML

<div class="toggle">
<div class="toggle-item bg"></div>
<div class="toggle-item button"></div>
</div>

的CSS

.toggle{
position: relative;
margin: auto;
text-align: center;
width: 342px;
}

.toggle-item{
position: absolute;
margin: auto;
text-align: center;
}

.button{
width: 50px;
height: 50px;
left: 75px;
background-color: red;
}

.bg{
width: 200px;
height: 50px;
background-color: #000;
}

https://jsfiddle.net/cjymyzg6/

理想情况下，我想分配一个变量，因为我打算将此变量用作同位素网格的过滤器

最佳答案

这是一个可能的解决方案：

var pos = 1;
$('.toggle').click(function(){
    if(pos === 1){
        $('.button').css('left', '0');
    }else if(pos === 2){
        $('.button').css('left', '75px');
    }else if(pos === 3){
        $('.button').css('left', '150px');
    }else if(pos === 4){
        $('.button').css('left', '75px');
        pos = 0;
    }
    pos++;
});

变量pos保存当前位置。另外，我添加了CSS过渡。

请参见此处的工作：https://jsfiddle.net/lmgonzalves/cjymyzg6/2/