我的目標是在第一次單擊時將 div 元素移動到頁面的右側，如果再次單擊它，則將其移回左側，依此類推。我怎樣才能在 javascript 中做到這一點？
uj5u.com熱心網友回復：
正如 enhzfelp 在他們的評論中所說，最好的解決方案是創建一個 css 類，將您的元素移動到頁面的右側，并使用 javascript 添加/洗掉它。
如果您的目標實際上是執行一個操作，而在下一個事件呼叫時執行另一個操作，則可以在呼叫事件時簡單地更改變數。
示例代碼：
let right = false;
someElement.on('click', () => {
right = !right;
if (right) moveRight();
else moveLeft();
});
function moveRight() { ... }
function moveLeft() { ... }
uj5u.com熱心網友回復：
你也可以這樣做
<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>
uj5u.com熱心網友回復：
所以，據我所知，你想在點擊時使 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")
}
uj5u.com熱心網友回復：
嗯，我的英語有點弱，所以我會盡力解釋。
讓我們假設我們有一個div帶有 id 的moveable
<div id="moveable"></div>
我們有按鈕
<button id="move">Move</div>
我們的目標是div在第一次點擊時將其向右移動，在第二次點擊時，我們將其移回右側。
let button = document.getElementById("move");
let div = document.getElementById("moveable");
button.addEventListener("click", function () {
const dataMovedAttribute = div.getAttribute("data-moved");
if (dataMovedAttribute && dataMovedAttribute === "true") {
div.setAttribute("data-moved", "false");
div.style.float = "left";
} else {
div.setAttribute("data-moved", "true");
div.style.float = "right";
}
});
查看此示例：https : //codesandbox.io/s/vigilant-rosalind-176by
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/348810.html
標籤：javascript html