JS 點擊事件監聽器只工作一次，而不是預期的 if 語句
[英]JS click event listener only works once and not with the expected if statement
問題描述
我正在使用一個庫來比較不同的照片，比如“之前和之后”之類的東西，它們顯示在另一個頂部，中間有一個按鈕，您可以向左或向右拖動以查看差異。
現在，我想要做的是實現兩個按鈕 - 一個在圖片的左側，一個在右側。 當您單擊這些按鈕時，我希望照片隨前兩張或后兩張發生變化。
我為按鈕做了一個 if 語句，但它們不能正常工作，盡管我沒有注意到任何明顯的錯誤。
HTML代碼
<div id="wrapper">
<div class="arrowsContainer">
<div id="leftArrow">
<p>Left</p>
</div>
</div>
<div class="cd-image-container">
<img src="" id="originalImage" alt="Original Image">
<div class="cd-resize-img">
<img src="" id="modifiedImage" alt="Modified Image">
</div>
<span class="cd-handle"></span>
</div>
<div class="arrowsContainer">
<div id="rightArrow">
<p>Right</p>
</div>
</div>
</div>
JavaScript 代碼
let originalImage = document.querySelector('#originalImage');
let modifiedImage = document.querySelector('#modifiedImage');
document.querySelector('#leftArrow').addEventListener("click", function(){
if ((modifiedImage.src = "img/3.jpg") && (originalImage.src = "img/4.jpg")){
modifiedImage.src = "img/1.jpg";
originalImage.src = "img/2.jpg";
}
});
document.querySelector('#rightArrow').addEventListener('click', function(){
if ((modifiedImage.src = "img/1.jpg") && (originalImage.src = "img/2.jpg")){
modifiedImage.src = "img/3.jpg";
originalImage.src = "img/4.jpg";
}
if ((modifiedImage.src = "img/3.jpg") && (originalImage.src = "img/4.jpg")){
modifiedImage.src = "img/5.jpg";
originalImage.src = "img/6.jpg";
}
if ((modifiedImage.src = "img/5.jpg") && (originalImage.src = "img/6.jpg")){
modifiedImage.src = "img/7.jpg";
originalImage.src = "img/8.jpg";
}
});
現在，如果我打開頁面，會顯示照片 1 和 2。 如果我點擊“右”按鈕，它會顯示圖片 7 和 8，從那里，如果我點擊“左”按鈕，它會再次顯示圖片 1 和 2，盡管我在“左”有條件按鈕甚至不包括您在圖片 7 和 8 處的場景。
請幫忙，我真的不明白發生了什么
2 個解決方案
解決方案1
1 已采納 2020-03-29 15:36:03
我想，你正在努力實現的是，當你點擊right要顯示接下來的兩個圖像按鈕，當你點擊prev按鈕，你要顯示的前兩個圖像。 如果是這種情況，那么您可以檢查我的解決方案。
這是js文件。
let originalImage = document.querySelector("#originalImage");
let modifiedImage = document.querySelector("#modifiedImage");
const totalImages = 8;
let currentCount = 0;
document.querySelector("#leftArrow").addEventListener("click", function() {
currentCount = (currentCount - 2 + totalImages) % totalImages;
originalImage.src = `./img/${currentCount + 1}.jpg`;
modifiedImage.src = `./img/${currentCount + 2}.jpg`;
});
document.querySelector("#rightArrow").addEventListener("click", function() {
currentCount = (currentCount + 2) % totalImages;
originalImage.src = `./img/${currentCount + 1}.jpg`;
modifiedImage.src = `./img/${currentCount + 2}.jpg`;
});
這是.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- <div class="container">Item</div> -->
<div id="wrapper">
<div class="arrowsContainer">
<div id="leftArrow">
<p>Left</p>
</div>
</div>
<div class="cd-image-container">
<img src="./img/1.jpg" id="originalImage" alt="Original Image" />
<div class="cd-resize-img">
<img src="./img/2.jpg" id="modifiedImage" alt="Modified Image" />
</div>
<span class="cd-handle"></span>
</div>
<div class="arrowsContainer">
<div id="rightArrow">
<p>Right</p>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
let originalImage = document.querySelector("#originalImage"); let modifiedImage = document.querySelector("#modifiedImage"); const totalImages = 8; let currentCount = 0; document.querySelector("#leftArrow").addEventListener("click", function() { currentCount = (currentCount - 2 + totalImages) % totalImages; originalImage.src = `https://i.picsum.photos/id/${currentCount + 1}/200/300.jpg`; modifiedImage.src = `https://i.picsum.photos/id/${currentCount + 2}/200/300.jpg`; }); document.querySelector("#rightArrow").addEventListener("click", function() { currentCount = (currentCount + 2) % totalImages; originalImage.src = `https://i.picsum.photos/id/${currentCount + 1}/200/300.jpg`; modifiedImage.src = `https://i.picsum.photos/id/${currentCount + 2}/200/300.jpg`; });
#wrapper { display: flex; } .cd-image-container { display: flex; } #leftArrow, #rightArrow { cursor: pointer; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <!-- <div class="container">Item</div> --> <div id="wrapper"> <div class="arrowsContainer"> <div id="leftArrow"> <p>Left</p> </div> </div> <div class="cd-image-container"> <img src="https://i.picsum.photos/id/1/200/300.jpg" id="originalImage" alt="Original Image" /> <div class="cd-resize-img"> <img src="https://i.picsum.photos/id/2/200/300.jpg" id="modifiedImage" alt="Modified Image" /> </div> <span class="cd-handle"></span> </div> <div class="arrowsContainer"> <div id="rightArrow"> <p>Right</p> </div> </div> </div> <script src="main.js"></script> </body> </html>
解決方案2
0 2020-03-29 15:40:08
在 if 語句中使用 == 或 ===
試一試
if ((modifiedImage.src == "img/1.jpg") && (originalImage.src == "img/2.jpg")){
modifiedImage.src = "img/3.jpg";
originalImage.src = "img/4.jpg";here
JS“單擊”事件僅適用一次
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.