Question

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

我想要的：每次我点击＆＃34; .c-button＆＃34;我想要＆＃34; .belt＆＃34;班级转移-290px。

发生了什么：＆＃34; .belt＆＃34;只翻译第一次点击，之后的每次点击都不做任何事情。帮助

$(".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值。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

.click仅适用于.css一次

2 个答案: