0

我是新手，正在学习编码以提高我的技能。我一直在处理基本页面并遇到了问题。我在页面上有 3 张图片。每个都有一个之前和之后的按钮，该按钮具有一个 onclick 以更改图像以显示原始照片，然后是编辑后的照片。我设法使它适用于 1 张照片，但是，当我为第 2 张和第 3 张图像编写函数时，所有 3 个按钮组都只更改了第 3 张照片。这张照片根据按下的按钮循环显示所有 6 张图像。:) 我的 Codepen 链接如下。

https://codepen.io/Rayhaan2k9/pen/BaLaOYJ

var img = document.getElementById("Yusuf-log");

function before1() {
  img.src = 'https://i.imgur.com/DpwkckU.jpg';
}

function after1() {
  img.src = 'https://i.imgur.com/foO4uWu.jpg';
}

var img = document.getElementById("Yusuf field");

function before2() {
  img.src = 'https://i.imgur.com/dd6WEZu.jpg';
}

function after2() {
  img.src = 'https://i.imgur.com/A6KAOZz.jpg';
}

var img = document.getElementById("Zak-mosque");

function before3() {
  img.src = 'https://i.imgur.com/O2cjLB7.jpg';
}

function after3() {
  img.src = 'https://i.imgur.com/Mpnx3rP.jpg';
}
img {
  height: 400px;
  width: 600px
}
<!DOCTYPE HTML>
<img id="Yusuf-log" src="https://i.imgur.com/DpwkckU.jpg" alt="Yusuf Log">

<div class="button-area1">
  <button onclick="before1()">Before</button>
  <button onclick="after1()">After</button>
</div>

<img id="Yusuf field" src="https://i.imgur.com/dd6WEZu.jpg" alt="Yusuf Field">

<!-- button area -->
<div class="button-area2">
  <button onclick="before2()">Before</button>
  <button onclick="after2()">After</button>
</div>

<img id="Zak-mosque" src="https://i.imgur.com/O2cjLB7.jpg" alt="Zakariyya Mosque">

<!-- button area -->
<div class="button-area3">
  <button onclick="before3()">Before</button>
  <button onclick="after3()">After</button>
</div>

</body>
</html>

4

5 回答 5

0

您应该在函数中添加 img 变量，

function before1() {
  var img = document.getElementById("Yusuf-log");
  img.src = 'https://i.imgur.com/DpwkckU.jpg';
}

function after1() {
  var img = document.getElementById("Yusuf-log");
  img.src = 'https://i.imgur.com/foO4uWu.jpg';
}
于 2020-11-27T11:16:23.217 回答
0

您img为所有三张照片声明相同的变量名称，因此它仅适用于最后一个img变量。改用其他名称将解决您的问题。

var img1 = document.getElementById("Yusuf-log");
var img2 = document.getElementById("Yusuf-field");
var img3 = document.getElementById("Zak-mosque");

    function before1(){
        img1.src='https://i.imgur.com/DpwkckU.jpg';
    }

    function after1(){
        img1.src='https://i.imgur.com/foO4uWu.jpg';
        
    }

    ..

这是更新的代码

于 2020-11-27T11:21:21.150 回答
0

尝试这个

var img = document.getElementById("Yusuf-log");

function before1() {
  img.src = 'https://i.imgur.com/DpwkckU.jpg';
}

function after1() {
  img.src = 'https://i.imgur.com/foO4uWu.jpg';
}

var img2 = document.getElementById("Yusuf_field");

function before2() {
  img2.src = 'https://i.imgur.com/dd6WEZu.jpg';
}

function after2() {
  img2.src = 'https://i.imgur.com/A6KAOZz.jpg';
}

var img3 = document.getElementById("Zak-mosque");

function before3() {
  img3.src = 'https://i.imgur.com/O2cjLB7.jpg';
}

function after3() {
  img3.src = 'https://i.imgur.com/Mpnx3rP.jpg';
}
img {
  height: 400px;
  width: 600px
}
<!DOCTYPE HTML>
<img id="Yusuf-log" src="https://i.imgur.com/DpwkckU.jpg" alt="Yusuf Log">

<div class="button-area1">
  <button onclick="before1()">Before</button>
  <button onclick="after1()">After</button>
</div>

<img id="Yusuf_field" src="https://i.imgur.com/dd6WEZu.jpg" alt="Yusuf Field">

<!-- button area -->
<div class="button-area2">
  <button onclick="before2()">Before</button>
  <button onclick="after2()">After</button>
</div>

<img id="Zak-mosque" src="https://i.imgur.com/O2cjLB7.jpg" alt="Zakariyya Mosque">

<!-- button area -->
<div class="button-area3">
  <button onclick="before3()">Before</button>
  <button onclick="after3()">After</button>
</div>

于 2020-11-27T11:21:27.513 回答
0

该id属性只能包含一个值，就像您在第一张和第三张图片中所做的那样，您忘记在第二张图片中添加破折号。

<img id="Yusuf-field" src="https://i.imgur.com/dd6WEZu.jpg" alt="Yusuf Field">

同样通过 Javascript，您已经初始化了变量img并再次重新初始化了它。您可以使用上一个答案并每次在函数中获取您的元素并初始化您的变量img 或添加一个数字以使它们中的每一个都不同，如下例所示

var ìmg1 = document.getElementById("Yusuf-log");
var ìmg2 = document.getElementById("Yusuf-field");
var ìmg3 = document.getElementById("Zak-mosque");
于 2020-11-27T11:21:50.340 回答
-1

作为旁注，为了避免代码重复，我建议创建一个可用于所有图片对的函数。

为此，在您的 HTML 中，可以将两张图片设置在同一个 div 中。从一张图片转换到另一张图片可能需要一个按钮而不是两个。

下面是这样一个函数的一个工作示例：

  • 以一个按钮 id、两张图片 id 作为参数
  • 检查按钮的状态以管理图像的不透明度
  • 每次单击时更改按钮的标签

const swapPicture = function(buttonId, picId0, picId1) {

  const button = document.getElementById(buttonId),
        currentPicture = document.getElementById(picId0),
        hiddenPicture = document.getElementById(picId1);
            
  button.addEventListener("click", () => {
    if (button.innerHTML === "before") {
       currentPicture.style.opacity = 0;
       hiddenPicture.style.opacity = 1;
       button.innerHTML = "after";
      } else {
       currentPicture.style.opacity = 1;
       hiddenPicture.style.opacity = 0;
       button.innerHTML = "before"
      }
   });
}

swapPicture("btn","img0","img1");
.image-swap {
  position: relative;
  width:300px;
  height:200px;
}

img {
  width: 100%;
  height:100%;
  position: absolute;
  object-fit: cover;
}

button {
  margin-top: 24px;
}
<div class="image-swap">
  <img id="img0" src="https://i.imgur.com/DpwkckU.jpg">
  <img id="img1" src="https://i.imgur.com/foO4uWu.jpg">
</div>

<button id="btn">before</button>

于 2020-11-27T11:26:06.517 回答