是否有一种方法，一个JS脚本只影响我的HTML代码的一部分?

Question

我是第一次使用JS来显示/隐藏图像取决于是否按下按钮:如果"新版本"按钮被按下，我想要"new"。要显示的图像和"旧的";隐藏，"旧版本"则反之。按钮。下面是我的代码:

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两次，但使用类不知何故破坏了我的页面。

Answer 1

就像你说的，你不能有重复的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>