.click只适用于.css一次

Question

我正在尝试制作一个自定义滑块。

我想要什么：每次我点击".c-button"时，我都希望".bbelt"类偏移-290px。

发生了什么：".belt"只在第一次点击时翻译，之后的每次点击都不会起任何作用。帮助

$(".c-button").click(function() {
    $(".belt").css({"transform":"translateX(-290px)"});
  });

Answer 1

这不是CSS转换属性的工作方式。这将当前变换设置为距离元素正常所在位置正好290个像素。

为了增加翻译量，您需要读取当前值，然后将其解析为整数，然后添加（好吧，减去）290个像素，然后根据该值执行翻译。

$(".belt").click(function(){
  var posX = parseInt($(".belt").css('transform').split(/,/)[4]);
  posX -= 290;
  console.log(posX);
  $(".belt").css('transform','translatex('+posX+'px)');
});

Answer 2

正如Draco18s所提到的，您正在将元素的平移相对于其原始位置转换特定的量。每次单击按钮时，翻译都会设置为相同的值。您需要递增translateX值。

一种方法是读取当前值并将其递增，如Draco18s所示
另一种方法是将值存储在变量中，如Miljan Puzović所示。

---

另一种方法是使用CSS left而不是transform。使用加法赋值（+=）运算符可以更容易地增加left的值，而无需存储或解析当前值。

$(".c-button").click(function() {
  $(".belt").css({
    "left": "+=20"
  });
});

.belt {
  position: relative;
  background-color: #F00;
  width: 1em;
  height: 1em;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="belt"></div>
<button class="c-button">click</button>
<button class="c-button">click</button>
<button class="c-button">click</button>