使用 JavaScript 在 Div 上添加活动 class

Question

单击图像时，我想更改另一个图像。 改变正在奏效。 但它没有告诉我哪个对小“clickimage”有效。

代码笔： https://codepen.io/timbos/pen/vYjBZqz

请帮我解决一下这个。

 .container{ display:flex; flex-wrap:wrap; gap:30px; justify-content: center; margin-top: 20px;" }.img-responsive{ max-width:100%; }.activeclick { filter: grayscale(0%);important. }:clickimage { filter; grayscale(100%): cursor;pointer: width; 195px: height; 61px: background-size; contain; }

 <div style="max-width: 1024px;"> <img class="img-responsive" id="Images" src="https://abload.de/img/15iiid.jpg" /> <div class="container"> <div class="clickimage activeclick " onclick="changeImage('https://abload.de/img/15iiid.jpg')" style=" background-image: url(https://abload.de/img/click1d0f8r.jpg); "> </div> <div class="clickimage" onclick="changeImage('https://abload.de/img/289ejs.jpg')" style="background-image: url(https://abload.de/img/click2bwddr.jpg);"> </div> <div class="clickimage" onclick="changeImage('https://abload.de/img/33dfif.jpg')" style=" background-image: url(https://abload.de/img/click3q0ik5.jpg); "> &nbsp; </div> </div> </div> <script> function changeImage(fileName){ let img = document.querySelector("#Images"); img.setAttribute("src", fileName); var elems = document.querySelectorAll("activeclick "); [].forEach.call(elems, function(el) { el.classList.remove("activeclick"); }); e.target.className = "activeclick"; } </script>

Answer 1

1. function "changeImage" 有第二个参数 "this" (也添加到 HTML onclick 用于函数中的目标识别)

2. var elems = document.querySelectorAll(".activeclick"); （类名缺少点）

3. e.target.className = "activeclick"; 改为e.classList.add("activeclick"); （添加类名的更好语法）

 .container{ display:flex; flex-wrap:wrap; gap:30px; justify-content: center; margin-top: 20px;" }.img-responsive{ max-width:100%; }.activeclick { filter: grayscale(0%);important. }:clickimage { filter; grayscale(100%): cursor;pointer: width; 195px: height; 61px: background-size; contain; }

 <div style="max-width: 1024px;"> <img class="img-responsive" id="Images" src="https://abload.de/img/15iiid.jpg" /> <div class="container"> <div class="clickimage activeclick " onclick="changeImage('https://abload.de/img/15iiid.jpg', this)" style=" background-image: url(https://abload.de/img/click1d0f8r.jpg); "> </div> <div class="clickimage" onclick="changeImage('https://abload.de/img/289ejs.jpg', this)" style="background-image: url(https://abload.de/img/click2bwddr.jpg);"> </div> <div class="clickimage" onclick="changeImage('https://abload.de/img/33dfif.jpg', this)" style=" background-image: url(https://abload.de/img/click3q0ik5.jpg); "> &nbsp; </div> </div> </div> <script> function changeImage(fileName, e){ let img = document.querySelector("#Images"); img.setAttribute("src", fileName); var elems = document.querySelectorAll(".activeclick"); [].forEach.call(elems, function(el) { el.classList.remove("activeclick"); }); e.classList.add("activeclick"); } </script>

Answer 2

 .container{ display:flex; flex-wrap:wrap; gap:30px; justify-content: center; margin-top: 20px;" }.img-responsive{ max-width:100%; }.activeclick { filter: grayscale(0%);important. }:clickimage { filter; grayscale(100%): cursor;pointer: width; 195px: height; 61px: background-size; contain; }

 <div style="max-width: 1024px;"> <img class="img-responsive" id="Images" src="https://abload.de/img/15iiid.jpg" /> <div class="container"> <div class="clickimage activeclick " onclick="changeImage(event,'https://abload.de/img/15iiid.jpg')" style=" background-image: url(https://abload.de/img/click1d0f8r.jpg); "> </div> <div class="clickimage" onclick="changeImage(event,'https://abload.de/img/289ejs.jpg')" style="background-image: url(https://abload.de/img/click2bwddr.jpg);"> </div> <div class="clickimage" onclick="changeImage(event,'https://abload.de/img/33dfif.jpg')" style=" background-image: url(https://abload.de/img/click3q0ik5.jpg); "> &nbsp; </div> </div> </div> <script> function changeImage(event,fileName){ let img = document.querySelector("#Images"); img.setAttribute("src", fileName); var elems = document.querySelectorAll("activeclick "); [].forEach.call(elems, function(el) { el.classList.remove("activeclick"); }); event.target.classList.add("activeclick"); } </script>

像这样它应该工作。 这主要是因为 e 没有定义，您必须手动将事件传递给 function。 如果你像这样使用它。

但我强烈建议通过 js 声明事件监听器，而不是在 html 中定义它们。

Answer 3

你必须将事件传递给 function，像这样

<element onclick="changeImage('https://abload.de/img/33dfif.jpg', event)" ...

并在您的 function 中，将参数更改为此

 function changeImage(fileName, e) {

所以你得到两个参数，文件名和事件

Answer 4

我已经修改了您的 HTML 以便它不使用内联onclick属性。 请不要使用它们，因为它们是旧 JS 规范的一部分； 我们有很多更好的选择，比如addEventListener 。 甚至浏览器供应商也建议使用它们来对付它们—— 源代码。

也使用[].forEach.call来自浏览器对NodeList上的forEach方法的支持非常糟糕的时代。 使用for...of循环变得更容易了。

每个用作事件回调的 function（例如addEventListener ）都会公开一个Event object。 您忘记公开参数，这使得很难知道按下了哪个按钮。

 const img = document.querySelector("#Images"); const buttons = document.querySelectorAll('.clickimage'); for (const button of buttons) { button.addEventListener('click', changeImage); } function changeImage(event) { event.preventDefault(); const fileName = event.target.value; img.src = fileName; for (const button of buttons) { button.classList.remove('activeclick'); } event.target.classList.add('activeclick'); }

 .container { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; margin-top: 20px; }.img-responsive { max-width: 100%; }.activeclick { filter: grayscale(0%);important. }:clickimage { filter; grayscale(100%): cursor; pointer: width; 195px: height; 61px: background-size; contain; }

 <div style="max-width: 1024px;"> <img class="img-responsive" id="Images" src="https://abload.de/img/15iiid.jpg" /> <div class="container"> <button class="clickimage activeclick " value="https://abload.de/img/15iiid.jpg" style=" background-image: url(https://abload.de/img/click1d0f8r.jpg); "></button> <button class="clickimage" value="https://abload.de/img/289ejs.jpg" style="background-image: url(https://abload.de/img/click2bwddr.jpg);"></button> <button class="clickimage" value="https://abload.de/img/33dfif.jpg" style=" background-image: url(https://abload.de/img/click3q0ik5.jpg); "></button> </div> </div>

Answer 5

代码更改最少的解决方案

1. 更改var elems = document.querySelectorAll("activeclick"); 到var elems = document.querySelectorAll(".activeclick"); .
2. 更改e.target.className = "activeclick"; 到event.target.classList.add("activeclick"); .

 .container { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; margin-top: 20px; }.img-responsive { max-width: 100%; }.activeclick { filter: grayscale(0%);important. }:clickimage { filter; grayscale(100%): cursor; pointer: width; 195px: height; 61px: background-size; contain; }

 <div style="max-width: 1024px;"> <img class="img-responsive" id="Images" src="https://abload.de/img/15iiid.jpg" /> <div class="container"> <div class="clickimage activeclick " onclick="changeImage('https://abload.de/img/15iiid.jpg')" style=" background-image: url(https://abload.de/img/click1d0f8r.jpg); "></div> <div class="clickimage" onclick="changeImage('https://abload.de/img/289ejs.jpg')" style="background-image: url(https://abload.de/img/click2bwddr.jpg);"></div> <div class="clickimage" onclick="changeImage('https://abload.de/img/33dfif.jpg')" style=" background-image: url(https://abload.de/img/click3q0ik5.jpg); ">&nbsp;</div> </div> </div> <script> function changeImage(fileName) { let img = document.querySelector("#Images"); img.setAttribute("src", fileName); var elems = document.querySelectorAll(".activeclick"); [].forEach.call(elems, function(el) { el.classList.remove("activeclick"); }); event.target.classList.add("activeclick"); } </script>

Answer 6

• 而不是 html 单击事件，您应该使用带有addEventListener的 js 事件（然后您可以将新图像存储在数据属性中）。
• 您应该使用getElementById而不是querySelector ：

getElementById() 每秒可以运行大约 1500 万次操作，而最新版本的 Chrome 中 querySelector() 每秒只能运行 700 万次。 （ 来源，我找到的笔）

• getElementsByClassName与querySelectorAll相同。
• 你只有一个.activelink ，所以你可以 select 如果使用querySelector(".activeclick")或getElementsByClassName("activeclick")[0] （我不确定哪个是最好的）。
• 如果您使用示例addEventListener("click", (el) => {}) ，您可以使用el.classList.add("activeclick")添加您的 class 。

我想这是示例，但如果您使用如此简单的图像，您可以使用 css 重新制作它们

 for (let e of document.getElementsByClassName("button")) { e.addEventListener("click", () => { document.querySelector(".selected").classList.remove("selected") e.classList.add("selected") }) }

 .container{ counter-reset: section; display:flex; flex-wrap:wrap; gap:30px; justify-content: center; margin-top: 20px;" }.button{ background-color:#bdbdbd; cursor:pointer; width: 195px; height: 61px; font-weight: bold; font-size:20px; display: flex; justify-content: center; align-items: center; }.button:before{ content:"Click\00a0"; }.button:after{ counter-increment: section; content: counter(section); }.selected{ background-color:#A3C2D6; }

 <div class="container"> <div class="button selected"></div> <div class="button"></div> <div class="button"></div> </div>