有沒有辦法讓JS腳本只影響我的HTML代碼的一部分？

我第一次使用 JS 來顯示/隱藏影像，具體取決于是否按下按鈕：如果按下“新版本”按鈕，我希望出現“新”影像并隱藏“舊”影像，并且“舊版本”按鈕反之亦然。這是我的代碼：

function showOld() {
  document.getElementById('new')
    .style.display = "none";

  document.getElementById('old')
    .style.display = "block";

  document.getElementById('btn-to-old')
    .classList.toggle('btn-click');

  document.getElementById('btn-to-new')
    .classList.toggle('btn-click');
}

function showNew() {
  document.getElementById('old')
    .style.display = "none";

  document.getElementById('new')
    .style.display = "block";

  document.getElementById('btn-to-new')
    .classList.toggle('btn-click');

  document.getElementById('btn-to-old')
    .classList.toggle('btn-click');
}

<div class="container">
  <div class="row">
    <h2>Index</h2>
    <div class="button-box">
      <button type="button" onclick="showOld()" id="btn-to-old" class="btn-click">Old version</button>
      <button type="button" onclick="showNew()" id="btn-to-new">New version</button>
    </div>
    <img src="img/old-index.png" alt="old-index" id="old">
    <img src="img/new-index.png" alt="new-index" id="new">
  </div>
</div>
<div class="container">
  <div class="row">
    <h2>Home</h2>
    <div class="button-box">
      <button type="button" onclick="showOld()" id="btn-to-old" class="btn-click">Old version</button>
      <button type="button" onclick="showNew()" id="btn-to-new">New version</button>
    </div>
    <img src="img/old-home.png" alt="old-index" id="old">
    <img src="img/new-home.png" alt="new-index" id="new">
  </div>
</div>

不用說這段代碼不起作用，按下第二組按鈕將更改第一張影像而不是第二張影像。這個想法是只有按鈕正下方的兩個影像會受到按下它們上方按鈕的影響，而不是頁面下方的影像。我不知道如何得到這樣的結果。

我知道我不能兩次使用相同的 ID，但是使用類會以某種方式破壞我的頁面。

uj5u.com熱心網友回復：

正如你所說，你不能有重復的ID，所以你需要使用類。

使用 DOM 導航操作來處理與您單擊的按鈕相同的容器中的元素。

function showOld(el) {
  let container = el.closest(".container");
  container.querySelector('.new')
    .style.display = "none";

  container.querySelector('.old')
    .style.display = "block";

  container.querySelector('.btn-to-old')
    .classList.toggle('btn-click');

  container.querySelector('.btn-to-new')
    .classList.toggle('btn-click');
}

function showNew(el) {
  let container = el.closest(".container");
  container.querySelector('.old')
    .style.display = "none";

  container.querySelector('.new')
    .style.display = "block";

  container.querySelector('.btn-to-new')
    .classList.toggle('btn-click');

  container.querySelector('.btn-to-old')
    .classList.toggle('btn-click');
}

.btn-click {
  color: green;
}

<div class="container">
  <div class="row">
    <h2>Index</h2>
    <div class="button-box">
      <button type="button" onclick="showOld(this)" class="btn-to-old btn-click">Old version</button>
      <button type="button" onclick="showNew(this)" class="btn-to-new">New version</button>
    </div>
    <img src="img/old-index.png" alt="old-index" class="old">
    <img src="img/new-index.png" alt="new-index" class="new">
  </div>
</div>
<div class="container">
  <div class="row">
    <h2>Home</h2>
    <div class="button-box">
      <button type="button" onclick="showOld(this)" class="btn-to-old btn-click">Old version</button>
      <button type="button" onclick="showNew(this)" class="btn-to-new">New version</button>
    </div>
    <img src="img/old-home.png" alt="old-index" class="old">
    <img src="img/new-home.png" alt="new-index" class="new">
  </div>
</div>

標籤：javascript html 图片

上一篇：如何在不保存/匯入影像檔案的情況下生成GIF？

下一篇：組合2張影像不是我所期望的