猿问

JS 点击事件监听器仅工作一次，并且不能与预期的 if 语句一起工作

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

现在，我想做的是实现两个按钮 - 一个在图片的左侧，一个在右侧。当您单击这些按钮时，我希望照片与前两张或后两张发生变化。

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


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


米脂
浏览 146回答 2
2回答

素胚勾勒不出你

我认为您想要实现的是，当您单击按钮时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() {&nbsp; currentCount = (currentCount - 2 + totalImages) % totalImages;&nbsp; originalImage.src = `./img/${currentCount + 1}.jpg`;&nbsp; modifiedImage.src = `./img/${currentCount + 2}.jpg`;});document.querySelector("#rightArrow").addEventListener("click", function() {&nbsp; currentCount = (currentCount + 2) % totalImages;&nbsp; originalImage.src = `./img/${currentCount + 1}.jpg`;&nbsp; modifiedImage.src = `./img/${currentCount + 2}.jpg`;});这是.html文件<!DOCTYPE html><html>&nbsp; <head>&nbsp; &nbsp; <meta charset="UTF-8" />&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0" />&nbsp; &nbsp; <meta http-equiv="X-UA-Compatible" content="ie=edge" />&nbsp; &nbsp; <title>Document</title>&nbsp; &nbsp; <link rel="stylesheet" href="style.css" />&nbsp; </head>&nbsp; <body>&nbsp; &nbsp; <!-- <div class="container">Item</div> -->&nbsp; &nbsp; <div id="wrapper">&nbsp; &nbsp; &nbsp; <div class="arrowsContainer">&nbsp; &nbsp; &nbsp; &nbsp; <div id="leftArrow">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Left</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="cd-image-container">&nbsp; &nbsp; &nbsp; &nbsp; <img src="./img/1.jpg" id="originalImage" alt="Original Image" />&nbsp; &nbsp; &nbsp; &nbsp; <div class="cd-resize-img">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="./img/2.jpg" id="modifiedImage" alt="Modified Image" />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <span class="cd-handle"></span>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="arrowsContainer">&nbsp; &nbsp; &nbsp; &nbsp; <div id="rightArrow">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Right</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <script src="main.js"></script>&nbsp; </body></html>let originalImage = document.querySelector("#originalImage");let modifiedImage = document.querySelector("#modifiedImage");const totalImages = 8;let currentCount = 0;document.querySelector("#leftArrow").addEventListener("click", function() {&nbsp; currentCount = (currentCount - 2 + totalImages) % totalImages;&nbsp; originalImage.src = `https://i.picsum.photos/id/${currentCount + 1}/200/300.jpg`;&nbsp; modifiedImage.src = `https://i.picsum.photos/id/${currentCount + 2}/200/300.jpg`;});document.querySelector("#rightArrow").addEventListener("click", function() {&nbsp; currentCount = (currentCount + 2) % totalImages;&nbsp; originalImage.src = `https://i.picsum.photos/id/${currentCount + 1}/200/300.jpg`;&nbsp; modifiedImage.src = `https://i.picsum.photos/id/${currentCount + 2}/200/300.jpg`;});#wrapper {&nbsp; display: flex;}.cd-image-container {&nbsp; display: flex;}#leftArrow,#rightArrow {&nbsp; cursor: pointer;}<!DOCTYPE html><html>&nbsp; <head>&nbsp; &nbsp; <meta charset="UTF-8" />&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0" />&nbsp; &nbsp; <meta http-equiv="X-UA-Compatible" content="ie=edge" />&nbsp; &nbsp; <title>Document</title>&nbsp; &nbsp; <link rel="stylesheet" href="style.css" />&nbsp; </head>&nbsp; <body>&nbsp; &nbsp; <!-- <div class="container">Item</div> -->&nbsp; &nbsp; <div id="wrapper">&nbsp; &nbsp; &nbsp; <div class="arrowsContainer">&nbsp; &nbsp; &nbsp; &nbsp; <div id="leftArrow">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Left</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="cd-image-container">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.picsum.photos/id/1/200/300.jpg" id="originalImage" alt="Original Image" />&nbsp; &nbsp; &nbsp; &nbsp; <div class="cd-resize-img">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.picsum.photos/id/2/200/300.jpg" id="modifiedImage" alt="Modified Image" />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <span class="cd-handle"></span>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="arrowsContainer">&nbsp; &nbsp; &nbsp; &nbsp; <div id="rightArrow">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Right</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <script src="main.js"></script>&nbsp; </body></html>
0

杨__羊羊

在 if 语句中使用 == 或 ===试一试if&nbsp;((modifiedImage.src&nbsp;==&nbsp;"img/1.jpg")&nbsp;&&&nbsp;(originalImage.src&nbsp;==&nbsp;"img/2.jpg")){ &nbsp;&nbsp;&nbsp;&nbsp;modifiedImage.src&nbsp;=&nbsp;"img/3.jpg"; &nbsp;&nbsp;&nbsp;&nbsp;originalImage.src&nbsp;=&nbsp;"img/4.jpg";here
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答