JS click 事件监听器只工作一次，而不是预期的 if 语句答案

【问题标题】：JS click event listener only works once and not with the expected if statementJS click 事件监听器只工作一次，而不是预期的 if 语句
【发布时间】：2020-03-29 14:37:45
【问题描述】：

我正在使用一个库来比较不同的照片，比如“之前和之后”之类的东西，它们在另一个之上显示，并且中心有一个按钮，您可以向左或向右拖动查看差异。

现在，我要做的是实现两个按钮 - 一个在图片左侧，一个在右侧。当您单击这些按钮时，我希望照片与前两个或后两个一起更改。

我为按钮做了一个 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 中的场景。

请帮忙，我真的不明白发生了什么

【问题讨论】：

您在 if 语句中使用了单个 equal。那应该是“===”比较运算符。

标签： javascript html onclick dom-events

【解决方案1】：

我认为您想要实现的是，当您单击 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】：

在 if 语句中使用 == 或 ===

试一试

if ((modifiedImage.src == "img/1.jpg") && (originalImage.src == "img/2.jpg")){
    modifiedImage.src = "img/3.jpg";
    originalImage.src = "img/4.jpg";here

【讨论】：