Javascript沒有隱藏最后一張圖片上的按鈕

我現在有一個 JSFiddle 顯示我的代碼：

https://jsfiddle.net/qtu1xgw3/2/

基本上有一個影像按鈕（粉紅色的花朵），然后有 4 個影像會在單擊按鈕時發生變化。現在的問題是，當我到達最后一張圖片時，我希望按鈕隱藏。現在我需要單擊該按鈕兩次才能將其隱藏在最后一張影像上。但是我希望在最后一次單擊按鈕的同時隱藏它，同時顯示畫廊中的最后一張影像。

其中一張影像位于代碼的 html 部分，我認為這可能是導致此問題的原因，但我不確定如何在不破壞代碼的情況下以不同方式執行此操作？

（來自谷歌的隨機圖片用于測驗）

HTML：

<div class="test">
  
<div class="desc">
<h2 id="title_text">test1</h2>
<p id="under_text">test2</p>
</div>
        
<div id="pink">
<img src="https://images.vexels.com/media/users/3/234325/isolated/lists/cba2167ec09abeeee327ffa0f994151b-detailed-flower-illustration.png" onclick="imagefun()"></div>

<div class="game">
<img src="https://images.vexels.com/media/users/3/143128/isolated/lists/2a84565e7c9642368346c7e6317fa1fa-flat-flower-illustration-doodle.png" id="getImage"></div>

</div>

CSS：

.game img {
     width: 300px;
     height: auto;
    }

.test {
  display: flex;
  flex-direction: row;
}

JS：

var counter = 0,
gallery = ["https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/apps/914750/aab494aa7cde1991d0a86cc28ec6debdbee37d7f.jpg", "https://api.assistivecards.com/cards/gardening/flowers.png", "https://i.pinimg.com/474x/7d/10/75/7d1075cf259131c942037683d2243bb0.jpg"],
imagefun = function () {
  if (counter >= gallery.length) {
      document.getElementById("title_text").innerHTML = "test3";    document.getElementById("under_text").innerHTML = "test4";     document.getElementById("pink").style.display = "none";
  }
  else{
      document.getElementById("getImage").src = gallery[counter];
      counter  ;
  }
};

uj5u.com熱心網友回復：

我對您的代碼進行了一些更改。它會幫助你。

var counter = 0,
gallery = ["https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/apps/914750/aab494aa7cde1991d0a86cc28ec6debdbee37d7f.jpg", "https://api.assistivecards.com/cards/gardening/flowers.png", "https://i.pinimg.com/474x/7d/10/75/7d1075cf259131c942037683d2243bb0.jpg"],
imagefun = function () {
  if (counter == gallery.length -1) {
        document.getElementById("getImage").src = gallery[counter];
      document.getElementById("pink").style.display = "none";
  }
  else{
      document.getElementById("getImage").src = gallery[counter];
      counter  ;
  }
};

uj5u.com熱心網友回復：

當計數器等于您的陣列大小時嘗試此評估，如果是，則執行您想要的作業

imagefun = function () {
    if(counter==gallery.length)
  {
     document.getElementById("getImage").style.display = "none";
  }
  
  if (counter >= gallery.length) {
      document.getElementById("title_text").innerHTML = "test3";    
      document.getElementById("under_text").innerHTML = "test4";     
      document.getElementById("pink").style.display = "none";
  }
  else{
      document.getElementById("getImage").src = gallery[counter];
      counter  ;
  }
};

uj5u.com熱心網友回復：

問題是您在counter >= gallery.length檢查后增加了計數器。

正確的解決辦法是：

const gallery = [ 
 "https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/apps/914750/aab494aa7cde1991d0a86cc28ec6debdbee37d7f.jpg",
 "https://api.assistivecards.com/cards/gardening/flowers.png",
 "https://i.pinimg.com/474x/7d/10/75/7d1075cf259131c942037683d2243bb0.jpg",
];

let counter = 0;
document.getElementById("getImage").src = gallery[counter];

function imagefun() {
  counter  = 1;
  document.getElementById("getImage").src = gallery[counter];
  
  if (counter >= gallery.length - 1) {
    document.getElementById("title_text").innerHTML = "test3";    
    document.getElementById("under_text").innerHTML = "test4";     
    document.getElementById("pink").style.display = "none";
  }
};

標籤：javascript html 图片 功能

上一篇：如果我呼叫它的方法，我的類將回傳undefined

下一篇：如何防止setInterval同時被多次呼叫？