个人中心
gpt4 book ai didi

JavaScript 引用错误 : x is not defined

转载 作者：太空宇宙 更新时间：2023-11-03 22:33:19 27 4
gpt4 key购买 nike

我正在尝试构建一个网页来显示一些图像，当点击弹出窗口时，底部会出现一个带有缩略图的模式。我引用了 w3Schools 来创建它并对其进行了一些修改，但现在收到 ReferenceError: currentImg is not defined in the console。当我单击图像时，模式会弹出，但单击箭头时图像不会改变。请求帮助以了解错误以及如何修复它。请在下面找到我的代码。

function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

var slideIndex = 1;
showImgs(slideIndex);

function plusImg(n) {
  showImgs(slideIndex += n);
}

function plusImg(n) {
  showImgs(slideIndex = n);
}

function showImgs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > x.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = x.length;
  }
  alert(x.length)
  for (i = 0; i < x.length; i++) {
    alert(i)
    x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
  }
  x[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " w3-opacity-off";
  captionText.innerHTML = dots[slideIndex - 1].alt;
}
.s4 img {
  height: 413px;
  width: 319px;
  margin: 0px;
  cursor: pointer;
}

#myModal span {
  cursor: pointer;
}

.w3-content {
  max-width: 1200px;
}

.w3-content .mySlides {
  width: 100%;
}

.w3-content .w3-col {
  padding: 5px;
}

.demo {
  width: 100%;
}
<head>
  <title>Commander, Carrier Strike Group ELEVEN (CCSG 11) Fact Sheet</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
</head>

<body>
  <div class="w3-container">
    <div class="w3-row-padding">
      <div class="w3-col s4">
        <img src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page1.jpg" onclick="openModal();currentImg(1)" class="w3-hover-shadow">
        <img src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page2.jpg" onclick="openModal();currentImg(2)" class="w3-hover-shadow">
        <img src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page3.jpg" onclick="openModal();currentImg(3)" class="w3-hover-shadow">
        <img src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page4.jpg" onclick="openModal();currentImg(4)" class="w3-hover-shadow">
        <img src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page5.jpg" onclick="openModal();currentImg(5)" class="w3-hover-shadow">
      </div>
    </div>

    <div id="myModal" class="w3-modal w3-black" style="display: block;">
      <span class="w3-text-white w3-xxlarge w3-hover-text-grey w3-container w3-display-topright" onclick="closeModal()">×</span>

      <div class="w3-modal-content">
        <div class="w3-content">
          <img class="mySlides" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page1.jpg" style="display: block;">
          <img class="mySlides" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page2.jpg" style="display: none;">
          <img class="mySlides" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page3.jpg" style="display: none;">
          <img class="mySlides" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page4.jpg" style="display: none;">
          <img class="mySlides" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page5.jpg" style="display: none;">
          <div class="w3-row w3-black w3-center">
            <p id="caption">Page 1</p>
            <span class="w3-display-left w3-btn" onclick="plusImg(-1)">&lt;</span>
            <span class="w3-display-right w3-btn" onclick="plusImg(1)">&gt;</span>
          </div>
          <div class="w3-col s4">
            <img class="demo w3-opacity w3-hover-opacity-off w3-opacity-off" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page1.jpg" onclick="currentImg(1)" alt="Page 1">
          </div>
          <div class="w3-col s4">
            <img class="demo w3-opacity w3-hover-opacity-off" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page2.jpg" onclick="currentImg(2)" alt="Page 2">
          </div>
          <div class="w3-col s4">
            <img class="demo w3-opacity w3-hover-opacity-off" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page3.jpg" onclick="currentImg(3)" alt="Page 3">
          </div>
          <div class="w3-col s4">
            <img class="demo w3-opacity w3-hover-opacity-off" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page4.jpg" onclick="currentImg(4)" alt="Page 4">
          </div>
          <div class="w3-col s4">
            <img class="demo w3-opacity w3-hover-opacity-off" src="https://www.public.navy.mil/surfor/ccsg11/PublishingImages/FactSheet_Page5.jpg" onclick="currentImg(5)" alt="Page 5">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

最佳答案

您有 2 个名为 plusImg 的函数。只需将第二个重命名为 currentImg

function plusImg(n) {
  showImgs(slideIndex += n);
}

function plusImg(n) {
  showImgs(slideIndex = n);
}

关于JavaScript 引用错误 : x is not defined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47701079/

27 4 0
文章推荐： c# - 我如何修复 backgroundworker 忙 c# 代码
文章推荐： c++ - opencv_highgui242.dll opencv 问题
文章推荐： c# - 将字符串转换为字符串[]，然后将字符串[]转换为字节[]
文章推荐： opencv - 将二维数组读入 opencv mat
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com