Javascript 在HTML/JS中单击后放大并重新缩放图片

第一次海报。我试图在HTML&JS中获得一个简单的函数，如果可能的话，它可以在一个页面上的不同图片之间向上调整图像的大小，然后再向下调整图像的初始大小。因此：

如果图像未放大，请放大单击的图像。 如果图像被放大，如果它是被点击的相同元素，则返回到初始大小 如果放大的图像不是被单击的元素，则找出放大的图像，将其缩小到初始大小，并将单击的元素放大 总共有8张图片。我创建了一个数组来更改1和0之间的值，也许可以使用一个计数来查找数组中的哪个数字不是0，然后向下调整大小，但我不知道如何获取该数据或更改数据以表示单击要放大的图像以更改数组中的特定值，例如，如果单击[5]，则更改[5]的值将变为1，然后java函数将循环遍历并确定它是第6个图像，并将其放大

var imgEnlarged=0； var otherEnlargedImgs=[0,0,0,0,0,0,0,0,0,0,0]； 函数imgEnlarge{ 如果imgEnlarged==0{//基本函数如果没有放大，请放大单击元素 document.getElementById0.style.width=400px； document.get imgEnlarged=1； otherEnlargedImgs[getElementById0]=1 } 否则，如果imgEnlarged==1{//如果图像被放大，它是这个吗？如果是，请调整图像大小 document.getElementById0.style.width=300px； imgEnlarged=0； 其他放大尺寸[0]=0 } 如果imgEnlarged==1&&imgEnlargedOther==1{//如果放大，哪个？关闭其他，打开当前元素 document.getElementById0.style.width=300px； imgEnlarged=1 其他放大尺寸[0]=1 } } 功能模拟信号{ }

---

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

var imgEnlarged=0； var otherEnlargedImgs=[0,0,0,0,0,0,0,0,0,0,0]； 函数imgEnlargee{ 如果imgEnlarged==0{//基本函数如果没有放大，请放大单击元素 e、 style.width=400px； imgEnlarged=1； 其他放大尺寸[e]=1 } 否则，如果imgEnlarged==1{//如果图像被放大，它是这个吗？如果是，请调整图像大小 e、 style.width=300px； imgEnlarged=0； 其他放大尺寸[0]=0 } 如果imgEnlarged==1&&imgEnlargedOther==1{//如果放大，哪个？关闭其他，打开当前元素 e、 style.width=300px； imgEnlarged=1 其他放大尺寸[0]=1 } } 功能模拟信号{ } 格德斯格里德先生{ 宽度：300px； }

---

首先，我们需要检查点击图像时，点击的图像是否放大。如果单击的图像被放大，则其宽度应设置为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>

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

---

希望它能有所帮助。

您可以使用一个功能，根据IDG检查当前正在处理的img。此功能运行良好，谢谢！函数中的e用于什么？它有什么用途？请注意“imgEnlargethis”中的“this”关键字。它将单击的DOM元素传递给“e”。它指的是点击的图像。有没有办法通过脚本获取img id？参考原始代码，如果我想在onclick中添加另一个函数来检索分配的img id，我该如何做？有可能吗？当然。。。您可以通过以下代码段获得它：document.getElementsByTagName'img'[i].id这里的'i'表示索引号。