通过每次点击添加一个数字来动态 translate3d

Question

您好，我正在尝试模拟滑块中的箭头，我将元素向左和向右移动。

到目前为止，我的项目向右移动了一次。

https://i.gyazo.com/34a0ef4a5064c2942aca7c717a775e8b.mp4

这是我目前的代码

<script>
  (function(){
    const arrowLeft = document.querySelector('#video-tags-left');
    const arrowRight = document.querySelector('#video-tags-right');
    const tags = document.querySelector('.video-tags');
    const now = "740";

    arrowRight.addEventListener("click", function() {
      $(tags).css({
        "transform": "translate3d(" + -now + "px, 0px, 0px)",
        "transform-style": "preserve-3d"
       });
    });

    arrowLeft.addEventListener("click", function() {
      $(tags).css({
        "transform": "translate3d("+ +now+", 0px, 0px)",
        "transform-style": "preserve-3d"
       });
    });
}());
</script>

所以我尝试添加和删除now，点击时为 740，所以每次点击右时添加 740，点击左时删除，直到重置为 0px。

因此，当用户单击左箭头时，我再次单击 740 再次 1460 等，反之亦然。

Answer 1

以下是您的代码存在的一些问题：

1. 您将“now”声明为 const，因此它的值无法更改
2. 您将“now”声明为字符串类型，因此您不能对其进行任何数学运算（例如递增或递减）

将您的代码更改为：

<script>
  (function(){
    const arrowLeft = document.querySelector('#video-tags-left');
    const arrowRight = document.querySelector('#video-tags-right');
    const tags = document.querySelector('.video-tags');
    let now = 740; // Declare "now" as variable of type number

    arrowRight.addEventListener("click", function() {
      now += 740; // Increment "now" by 740
      $(tags).css({
        "transform": "translate3d(" + now + "px, 0px, 0px)",
        "transform-style": "preserve-3d"
       });
    });

    arrowLeft.addEventListener("click", function() {
      now -= 740; // Decrement "now" by 740
      $(tags).css({
        "transform": "translate3d(" + now + "px, 0px, 0px)",
        "transform-style": "preserve-3d"
       });
    });
}());
</script>

Answer 2

每次单击其中一个箭头时，您应该增加/减少now 的值：

<script>
    (function(){
        const arrowLeft = document.querySelector('#video-tags-left');
        const arrowRight = document.querySelector('#video-tags-right');
        const tags = document.querySelector('.video-tags');
        const SLIDER_WIDTH = 740;
        let now = 0;

        arrowRight.addEventListener("click", function() {
            now -= SLIDER_WIDTH;
            $(tags).css({
                "transform": "translate3d(" + now + "px, 0px, 0px)",
                "transform-style": "preserve-3d"
            });
        });

        arrowLeft.addEventListener("click", function() {
            now += SLIDER_WIDTH;
            $(tags).css({
                "transform": "translate3d("+ now + "px, 0px, 0px)",
                "transform-style": "preserve-3d"
            });
        });
    }());
</script>

考虑到您还必须检查滑块的限制，以免将滑块移动到没有内容的部分。