点击元素

点击元素

2024-09-08 • 问答

我有一个问题，我有一个图库，当您单击图片时，图片想要变大，如果您再次单击，图片必须变小，但它不起作用，有人可以修复我的代码？

<!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>

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

os.getcwd()

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

.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>

你可以试试下面的代码。

<!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>

使用事件委托...

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>

mada_baidu 回答：点击元素

大家都在问