点击元素

Question

我有一个问题，我有一个图库，当你点击一张图片时，图片想变大，如果你再次点击，图片又要变小，但是没有用，可以吗有人帮我修改我的代码吗？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="content">
    <img class="pic" src="https://picsum.photos/id/200/200/200" alt="">
    <img class="pic" src="https://picsum.photos/id/400/200/200" alt="">
    <img class="pic" src="https://picsum.photos/id/201/200/200" alt="">
    <img class="pic" src="https://picsum.photos/id/450/200/200" alt="">
  </div>

  <script>

var img=document.getElementsByClassName("pic");
for(i=0;i<img.length;i++){
  img[i].addEventListener("click",(event)=>{
    var evento=event.target;
    evento.style.width="700px"
  })
}

img[i].addEventListener("click",(eventen)=>{
  var eventen=eventen.target;
  eventen.style.width="200px"
})

  </script>
</body>
</html>

Answer 1

您不能在同一张图片上添加 2 个相同的点击处理程序，因此在您的点击处理程序中，您需要检查宽度是否已经是 700 像素，如果是，则将其设置为 200，否则将其设置为 700

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="content">
    <img class="pic" src="https://picsum.photos/id/200/200/200" alt="">
    <img class="pic" src="https://picsum.photos/id/400/200/200" alt="">
    <img class="pic" src="https://picsum.photos/id/201/200/200" alt="">
    <img class="pic" src="https://picsum.photos/id/450/200/200" alt="">
  </div>

  <script>
    var img = document.getElementsByClassName("pic");
    for (i = 0; i < img.length; i++) {
      img[i].addEventListener("click", (event) => {
        var evento = event.target;
        Object.values(img).forEach((im) => im.style.width = "200px")
        evento.style.width = "700px"
      })
    }
  </script>
</body>

</html>

Answer 2

您可以使用 querySelectorAll 并在点击图片时切换 class

.pic-large {
  width: 700px;
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   
   <div id="content">
      <img class="pic" src="https://picsum.photos/id/200/200/200" alt="">
      <img class="pic" src="https://picsum.photos/id/400/200/200" alt="">
      <img class="pic" src="https://picsum.photos/id/201/200/200" alt="">
      <img class="pic" src="https://picsum.photos/id/450/200/200" alt="">

   </div>

<script>
  let img = document.querySelectorAll(".pic");
  
  img.forEach(i => {
    i.addEventListener("click", (event)=> {
      let cur = event.target.classList.contains('pic-large')
      img.forEach(i => i.classList.remove('pic-large'))
      cur ? event.target.classList.remove('pic-large') : 
      event.target.classList.add('pic-large')
    })
  })
  /*let img = document.getElementsByClassName("pic");
  for(let i = 0; i < img.length; i++){
    img[i].addEventListener("click", (event) => {
      let cur = event.target.classList.contains('pic-large');
      for(let i = 0; i < img.length; i++){
        img[i].classList.remove('pic-large')
      }
      cur ? event.target.classList.remove('pic-large') : event.target.classList.add('pic-large')
    })
  }*/
</script>
</body>
</html>

Answer 3

您可以试试下面的代码。

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>

<body>
    <div id = content>
        <img class = pic src = https://picsum.photos/id/200/200/200>
        <img class = pic src = https://picsum.photos/id/400/200/200>
        <img class = pic src = https://picsum.photos/id/201/200/200>
        <img class = pic src = https://picsum.photos/id/450/200/200>
    </div>

    <script>
        let images = document.getElementsByClassName("pic")

        for (image of images) {
            image.addEventListener("click", event => {
                let evento = event.target

                if (evento.style.width == "700px") evento.style.width = "200px"
                else evento.style.width = "700px"
            })
        }
    </script>
</body>
</html>

Answer 4

有事件委托...

const AllPics = document.querySelectorAll('#content img.pic')

document.querySelector('#content').onclick = evt =>
  {
  if (!evt.target.matches('img.pic')) return
  
  if ( evt.target.classList.toggle('big700') )
    AllPics.forEach(img=>
      {
      if (img != evt.target)
        img.classList.toggle('big700',false)
      })
  }

.big700 { width:700px }
#content img.pic { cursor : pointer }

<div id="content">
  <img class="pic" src="https://picsum.photos/id/200/200/200" alt="">
  <img class="pic" src="https://picsum.photos/id/400/200/200" alt="">
  <img class="pic" src="https://picsum.photos/id/201/200/200" alt="">
  <img class="pic" src="https://picsum.photos/id/450/200/200" alt="">
</div>

点击元素

click on Element

javascript

loops

toggle