如何在第一次單擊時執行操作並在第二次單擊時執行另一個操作

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")
}