JS click事件监听器仅工作一次,不适用于预期的if语句

问题描述 投票:0回答:3

[我正在使用一个库来比较不同的照片,例如“前后”,它们在一个照片上显示在另一个照片上,中间有一个按钮,您可以向左或向右拖动查看差异。

现在,我要执行的操作是实现两个按钮-一个在图片的左侧,另一个在右侧。当您单击这些按钮时,我希望照片根据前两张或后两张进行更改。

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

[请帮助,我真的不明白发生了什么

javascript html onclick dom-events
3个回答
0
投票

if语句中,条件应该是元素equal to|greater than|less than|ecc,另一个元素。

在条件内的代码中,将第二个元素的值分配给第一个元素:

> if ((modifiedImage.src = "img/1.jpg") && (originalImage.src = "img/2.jpg"))

您应该做的是检查它们是否是equal==

if ((modifiedImage.src == "img/1.jpg") && (originalImage.src == "img/2.jpg"))

0
投票

[我认为您要达到的目的是,当您单击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>

0
投票

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

试一下

if ((modifiedImage.src == "img/1.jpg") && (originalImage.src == "img/2.jpg")){
    modifiedImage.src = "img/3.jpg";
    originalImage.src = "img/4.jpg";here
© www.soinside.com 2019 - 2024. All rights reserved.