javascript - 在 HTML/JS 中点击放大和缩放图片

Question

第一次海报。我试图在 HTML 和 JS 中获得一个简单的(如果可能的话)单一函数来调整图像的大小，然后将其缩小到单个页面上不同图片之间的初始大小。所以:

• 如果图片未放大，则放大点击的图片。
• 如果图像被放大，如果它是被点击的相同元素，返回到初始大小
• 如果放大的图片不是被点击的元素，找出放大的图片，将其缩小到初始大小，然后放大点击的元素

总共有8张图片。我创建了一个数组来更改 1 和 0 之间的值，也许使用计数来查找数组中的哪个数字不是 0，然后调整大小，但我不知道如何获取该数据或更改数据以表示哪个单击图像以放大以更改数组中的特定值，例如，如果单击 [5]，则 [5] 的值将变为 1，然后 java 函数将循环并确定它是第 6 个图像并将其放大。

var imgEnlarged = 0;
var otherEnlargedImgs = [0, 0, 0, 0, 0, 0, 0, 0,];

function imgEnlarge(){ 
    if (imgEnlarged==0){          //Basic function if no enlarged, enlarge click element
        document.getElementById("0").style.width = "400px";
        document.get
        imgEnlarged = 1;
        otherEnlargedImgs[getElementById("0")] = 1 
    }
    else if (imgEnlarged==1) {    //If an image is enlarged, is it this one? If so, resize image
        document.getElementById("0").style.width = "300px";
        imgEnlarged = 0;
        otherEnlargedImgs[0] = 0
    }
    else if (imgEnlarged==1 && imgEnlargedOther==1)  { //if enlarged, which? Close other, open current element
        document.getElementById("0").style.width = "300px";
        imgEnlarged = 1
        otherEnlargedImgs[0] = 1
    }
}

function imgAssign() {

}

<div class="wrapper">
  <div class="grdsngrid">
      <div class=grdsnbox><img id="0" onclick="imgEnlarge()" onclick="imgAssign()" src="content/img0.jpg"><figcaption></figcaption></div>
      <div class=grdsnbox><img id="1" onclick="imgEnlarge()" onclick="imgAssign()" src="content/img1.jpg"><figcaption></figcaption></div>
      <div class=grdsnbox><img id="2" onclick="imgEnlarge()" onclick="imgAssign()" src="content/img2.jpg"><figcaption></figcaption></div>
      <div class=grdsnbox><img id="3" onclick="imgEnlarge()" onclick="imgAssign()" src="content/img3.jpg"><figcaption></figcaption></div>
      <div class=grdsnbox><img id="4" onclick="imgEnlarge()" onclick="imgAssign()" src="content/img4.jpg"><figcaption></figcaption></div>
      <div class=grdsnbox><img id="5" onclick="imgEnlarge()" onclick="imgAssign()" src="content/img5.jpg"><figcaption></figcaption></div>
      <div class=grdsnbox><img id="6" onclick="imgEnlarge()" onclick="imgAssign()" src="content/img6.jpg"><figcaption></figcaption></div>
      <div class=grdsnbox><img id="7" onclick="imgEnlarge()" onclick="imgAssign()" src="content/img7.jpg"><figcaption></figcaption></div>
  </div>
</div>

目前，如果为每个图像创建不同的函数，这仅适用于第一张图像或点击的任何图像(代码有点乱，对不起，我对编码很陌生)。有没有一种方法不需要每个图像都有自己的功能。

imageAssign 函数是将数字分配给所点击的特定图像数组中的位置，但这同样需要使用多个函数。

var imgEnlarged 是检查一张图片是否被放大，而不是具体是哪张图片被放大了。

在此先感谢您的任何帮助或建议。

Answer 1

您不需要多个函数。只需使用 JS this每个函数调用的关键字。

var imgEnlarged = 0;
var otherEnlargedImgs = [0, 0, 0, 0, 0, 0, 0, 0,];
function imgEnlarge(e){
  if (imgEnlarged==0){ //Basic function if no enlarged, enlarge click element
    e.style.width = "400px";
    imgEnlarged = 1;
    otherEnlargedImgs[e] = 1 
  }
  else if (imgEnlarged==1) { //If an image is enlarged, is it this one? If so, resize image
    e.style.width = "300px";
    imgEnlarged = 0;
    otherEnlargedImgs[0] = 0
  }
  else if (imgEnlarged==1 && imgEnlargedOther==1)  { //if enlarged, which? Close other, open current element
    e.style.width = "300px";
    imgEnlarged = 1
    otherEnlargedImgs[0] = 1
  }
}
function imgAssign() {

}

.grdsngrid img{
  width: 300px;
}

<div class="wrapper">
<div class="grdsngrid">
    <div class=grdsnbox><img id="0" onclick="imgEnlarge(this)" onclick="imgAssign()" src="https://via.placeholder.com/300x200"><figcaption></figcaption></div>
    <div class=grdsnbox><img id="1" onclick="imgEnlarge(this)" onclick="imgAssign()" src="https://via.placeholder.com/300x200"><figcaption></figcaption></div>
    <div class=grdsnbox><img id="2" onclick="imgEnlarge(this)" onclick="imgAssign()" src="https://via.placeholder.com/300x200"><figcaption></figcaption></div>
    <div class=grdsnbox><img id="3" onclick="imgEnlarge(this)" onclick="imgAssign()" src="https://via.placeholder.com/300x200"><figcaption></figcaption></div>
    <div class=grdsnbox><img id="4" onclick="imgEnlarge(this)" onclick="imgAssign()" src="https://via.placeholder.com/300x200"><figcaption></figcaption></div>
    <div class=grdsnbox><img id="5" onclick="imgEnlarge(this)" onclick="imgAssign()" src="https://via.placeholder.com/300x200"><figcaption></figcaption></div>
    <div class=grdsnbox><img id="6" onclick="imgEnlarge(this)" onclick="imgAssign()" src="https://via.placeholder.com/300x200"><figcaption></figcaption></div>
    <div class=grdsnbox><img id="7" onclick="imgEnlarge(this)" onclick="imgAssign()" src="https://via.placeholder.com/300x200"><figcaption></figcaption></div>
</div>