顯示帶有不同按鈕的圖片 html css javascript

Question

在我的項目中，我有很多按鈕，每個按鈕都會觸發不同的圖片來顯示。 在 JS 中使用 IF-ELSE 並且在我的本地 PC 版本中一切正常，但是當將其上傳到服務器時，只有第一個按鈕起作用，其他按鈕顯示“加載資源失敗：服務器響應狀態為 404”。 我的問題是什么其他方法可以代替 IF-ELSE

這是 JS 代碼的一部分（僅更改路徑名文件夾）

 var btnsImg = document.querySelectorAll(".btn-img") btnsImg.forEach(function(element) { element.addEventListener("click", function() { var val = element.getAttribute("data-value"); if (val == "h1") { document.querySelector(".img-cac").src = "pictures/mainFolder/Folder1/Picture1.JPG"; } else if (val == "h2") { document.querySelector(".img-cac").src = "pictures/mainFolder/Folder1/Picture2.jpg"; } else if (val == "h3") { document.querySelector(".img-cac").src = "pictures/mainFolder/Folder1/Picture3.jpg"; } else if (val == "c1") { document.querySelector(".img-cac").src = "pictures/mainFolder/Folder2/Picture4.jpg"; } else if (val == "c2") { document.querySelector(".img-cac").src = "pictures/mainFolder/Folder2/Picture5.jpg"; } }) })

 <li class="listCAC"> <button onclick="prHtml()"><strong>HTML</strong></button> <ul class="menu-html"> <li class="listCAC"> <button class="btn-img" data-value="h1">Picture1</button> </li> <li class="listCAC"> <button class="btn-img" data-value="h2">Picture2</button> </li> <li class="listCAC"> <button class="btn-img" data-value="h3">Picture3</button>

Answer 1

您可以用switch()語句替換if... else if...鏈：

const btnsImg = document.querySelectorAll('.btn-img')

btnsImg.forEach(function(element) {
  element.addEventListener('click', function() {
    const basePath = 'pictures/mainFolder/';
    const val = element.getAttribute('data-value');
    let picSrc = '';
    
    switch(val) {
        case 'h1':
        picSrc = 'Folder1/Picture1.JPG';
        break;
      case 'h2':
        picSrc = 'Folder1/Picture2.JPG';
        break;
      case 'h3':
        picSrc = 'Folder1/Picture3.JPG';
        break;
      case 'c1':
        picSrc = 'Folder2/Picture4.JPG';
        break;
      case 'c2':
        picSrc = 'Folder2/Picture5.JPG';
        break;
      default:
        console.log('An error occurred: check the data-value attributes');
    }
    
    document.querySelector('.img-cac').src = basePath + picSrc;
  })
});