Question

每次点击按钮，我都会移动div。它应始终移动相同的距离。我是用JavaScript做的，但是在第一次点击后我似乎无法使它工作。

HTML

<div id="container">
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
</div>
<button id="move">Click to move the square</button>

CSS

.slide {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: lightblue;
  margin-bottom: 10px;
  margin-right: 10px;
}

JS

document.getElementById("move").addEventListener("click", function() {
  document.getElementById("container").style.transform = "translateX(30px)"
})

我试过从事件监听器外部调用该函数，如下所示：

document.getElementById("move").addEventListener("click", clickNext);
function clickNext() {
  document.getElementById("container").style.transform = "translateX(30px)"
}

我还尝试使用“onclick”属性通过HTML处理点击事件：

HTML

<button id="move" onclick="clickNext()">Click to move the square</button>

JS

function clickNext() {
  document.getElementById("container").style.transform = "translateX(-100px)"
}

在这些代码位中的每一个中，按钮按预期工作，但只能工作一次。之后，按钮停止工作。

对于为什么会发生这种情况的任何帮助都会非常感激。

Answer 1

由于第二次点击时分配的style属性没有变化，因此没有animation

试试这个：

var amount = 30;
var initial = 0;
document.getElementById("move").addEventListener("click", function() {
  initial += amount;
  document.getElementById("container").style.transform = "translateX(" + initial + "px)"
})

.slide {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: lightblue;
  margin-bottom: 10px;
  margin-right: 10px;
}

<div id="container">
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
</div>
<button id="move">Click to move the square</button>

在JS中使用“transform：translate”只能使用一次

1 个答案: