显示带有不同按钮的图片 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;
  })
});