如何僅使用 javascript 使圖像在點擊時放大？

Question

我正在學習一門課程，該課程要求該單元的所有工作僅使用 Javascript 完成。 我的目標是使我網站照片庫中的圖像在單擊時放大。 問題是，onload 事件似乎無法將事件偵聽器添加到圖像中。 您可能會發現其他錯誤，但我想不出任何其他可能阻止代碼運行的問題。 這是我所擁有的：

var imgList = document.getElementsByTagName("IMG");

var btn = document.getElementByClassName("reset-btn");

function enlargeImg(img) {
  img.style.transform = "scale(1.5)";
  img.style.transition = "transform 0.25s ease";
  btn.style.visibility = "visible";
  btn.addEventListener("click", resetImg);
}

function resetImg(img) {
  img.style.transform = "scale(1)";
  img.style.transition = "transform 0.25s ease";
}

function init() {
  for (var i = 0; i < imgList.length; i++) {
    var img = imgList[i];
    img.addEventListener("click", enlargeImg);
  }
  
} 

body.addEventListener("load", init);

Answer 1

我對其進行了一些重構。 我使用事件委托將點擊事件添加到整個主體，然后使用目標屬性。

 var imgList = document.querySelectorAll('img'); var btn = document.querySelector('.reset-btn'); var body = document.querySelector('body'); body.addEventListener("click", function(e){ enlargeImg(e); }); btn.addEventListener('click', resetImg); function enlargeImg(e) { let target = e.target; if(target.className === 'img'){ target.style.transform = "scale(1.5)"; target.style.transition = "transform 0.25s ease"; } } function resetImg() { for (let i of imgList){ i.style.transform = "scale(1)"; i.style.transition = "transform 0.25s ease"; } }

 .reset-btn { margin-top: 200px; }

 <body> <img class="img" src="https://images.unsplash.com/photo-1570824104453-508955ab713e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=613&q=80"> <img class="img" src="https://images.unsplash.com/photo-1557246565-8a3d3ab5d7f6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"> <div> <button class="reset-btn">Reset</button> </div> <script type="text/javascript" src="Answer boiler.js"></script> <,-- Optional JavaScript --> <.-- jQuery first, then Popper:js. then Bootstrap JS --> <.-- <script src="https.//code.jquery.com/jquery-3.5.1:slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16:1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> --> </body>

如何僅使用 javascript 使圖像在點擊時放大？

問題描述

1 個解決方案

解決方案1
0 2021-03-08 00:54:25

如何僅使用 javascript 使圖像在點擊時放大？

問題描述

1 個解決方案

解決方案1 0 2021-03-08 00:54:25

解決方案1
0 2021-03-08 00:54:25