如何在第一次单击时执行操作并在第二次单击时执行另一个操作

Question

我的目标是在第一次单击时将 div 元素移动到页面的右侧，如果再次单击它，则将其移回左侧，依此类推。 我怎样才能在 javascript 中做到这一点？

Answer 1

正如 enhzfelp 在他们的评论中所说，最好的解决方案是创建一个 css 类，将您的元素移动到页面的右侧，并使用 javascript 添加/删除它。

如果您的目标实际上是执行一个操作，而在下一个事件调用时执行另一个操作，则可以在调用事件时简单地更改变量。

示例代码：

let right = false;

someElement.on('click', () => {
  right = !right;

  if (right) moveRight();
  else moveLeft();
});

function moveRight() { ... }
function moveLeft() { ... }

Answer 2

你也可以这样做

<script>
var clickCount = 0;
function checkClick() {
  if ( clickCount % 2 == 0 ) {
       alert("first click");
  } else {
      alert("Second click");
  }

  clickCount++
}
</script>

<button onclick="checkClick()">Click me</button>

Answer 3

嗯，我的英语有点弱，所以我会尽力解释。

假设我们有一个 id 为moveable的div

<div id="moveable"></div>

我们有按钮

<button id="move">Move</div>

我们的目标是在第一次单击时将div向右移动，在第二次单击时将其移回右侧。

var div = document.getElementById("moveable");
var button = document.getElementById("move"):

button.addEventListener("click", function() {
if (div.getAttribute("data-moved") && div.getAttribute("data-moved") == true){
div.setAttribute("data-moved", "false");
div.style.float = "left";
} else {
div.setAtteibute("data-moved", "true")
div.style.float = "right"
}
})

Answer 4

所以，据我所知，你想在点击时使 div 元素向左或向右的正方向移动。

您可以使用事件侦听器进行此操作，该侦听器侦听单击事件并在每次单击时执行您想要的任何操作。

document.addEventListener('click', function(event) {
  // your code that executes on every click
});

这个事件监听器监听你所有网页上的点击，所以如果你只想在用户点击你的 div 时监听点击，你需要获取 div。 有几种方法，但我建议您在 div 中添加一个 id。

<div id="iAmYourElement"></div>

然后在 JavaScript 中获取元素

const element = document.getElementById("iAmYourElement");
element.addEventListener('click', function(event) {
  // your code that executes on every click
});

现在我们有了处理点击事件的方法，让我们来谈谈进入侦听器内部的代码。

一种方法是创建两个 CSS 类，一个是左侧的 div，另一个是右侧的 div。 所以，如果我们需要元素在右边，我们添加 right-class，如果我们需要 div 在左边，我们添加 left-class 并删除 right-class。

最终的 javascript 代码将如下所示：

const element = document.getElementById("iAmYourElement");

let isDivOnLeft = true;
element.addEventListener('click', function (event) { // executes if you click on the div
  isDivOnLeft = !isDivOnLeft // We negate the value of isDivOnLeft, so if it was true, it will now be false and vice versa.
  if (isDivOnLeft) {
    elementToRight()
  } else {
    elementToLeft()
  }
});

function elementToRight() {
  element.classList.remove("left-class")
  element.classList.add("right-class")
}

function elementToLeft() {
  element.classList.remove("right-class")
  element.classList.add("left-class")
}