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

Answer 2

首先我们需要检查点击图片时点击图片是否放大。如果单击的图像被放大，则其宽度应设置为 300px。之后我们需要循环遍历图像。请看下面的代码：

<div class="wrapper">
        <div class="grdsngrid">
            <div class=grdsnbox><img id="img_0" onclick="imgEnlarge(this)" onclick="imgAssign()" src="content/img0.jpg"><figcaption></figcaption></div>
            <div class=grdsnbox><img id="img_1" onclick="imgEnlarge(this)" onclick="imgAssign()" src="content/img1.jpg"><figcaption></figcaption></div>
            <div class=grdsnbox><img id="img_2" onclick="imgEnlarge(this)" onclick="imgAssign()" src="content/img2.jpg"><figcaption></figcaption></div>
            <div class=grdsnbox><img id="img_3" onclick="imgEnlarge(this)" onclick="imgAssign()" src="content/img3.jpg"><figcaption></figcaption></div>
            <div class=grdsnbox><img id="img_4" onclick="imgEnlarge(this)" onclick="imgAssign()" src="content/img4.jpg"><figcaption></figcaption></div>
            <div class=grdsnbox><img id="img_5" onclick="imgEnlarge(this)" onclick="imgAssign()" src="content/img5.jpg"><figcaption></figcaption></div>
            <div class=grdsnbox><img id="img_6" onclick="imgEnlarge(this)" onclick="imgAssign()" src="content/img6.jpg"><figcaption></figcaption></div>
            <div class=grdsnbox><img id="img_7" onclick="imgEnlarge(this)" onclick="imgAssign()" src="content/img7.jpg"><figcaption></figcaption></div>
        </div>
    </div>
    <style type="text/css">
        img{
            width:300px;
        }
    </style>

    <script type="text/javascript">

        function imgEnlarge(e){

            if(e.style.width=="300px" || e.style.width=="" ){
                e.style.width="400px";
            }
            else{
                e.style.width="300px";
            }

            var imgLength = document.getElementsByTagName('img').length;

            for(var i = 0; i<imgLength; i++){
                if(document.getElementsByTagName('img')[i].id==  e.id){
                    continue;
                }
                document.getElementsByTagName('img')[i].style.width="300px";

            }
        }
    </script>

注意：HTMLid属性值不能以数字开头。另请注意，我在样式标签中将图像的宽度设置为 300px。

希望对您有所帮助。

在 HTML/JS 中点击放大和重新缩放图片

Enlarging and rescaling a picture down onclick in HTML/JS

html

javascript

css

image-resizing