JavaScript：使用for循环获取数组索引_Javascript_Arrays_For Loop_Dom Events

JavaScript：使用for循环获取数组索引

javascript arrays for-loop

JavaScript：使用for循环获取数组索引,javascript,arrays,for-loop,dom-events,Javascript,Arrays,For Loop,Dom Events,我是一个沮丧的新手，试图完成一些项目，但我总是被卡住。。。同样的原则（我相信）。谁能帮帮我吗？；）项目1：单击图像时，我想更改其src属性。当我在图像的数组中循环时，我不知道如何获取刚刚点击的图像的索引，我总是以最后一张图像的索引结束-我猜这是因为循环将遍历整个数组，这就是我添加break的原因；这应该能让我摆脱困境。它（显然）不起作用 *编辑： IIFE解决了项目1，我添加了项目2的全部源代码： <!DOCTYPE html> <html> <head>

我是一个沮丧的新手，试图完成一些项目，但我总是被卡住。。。同样的原则（我相信）。谁能帮帮我吗？；）

项目1：

单击图像时，我想更改其

src

属性。当我在

图像的数组中循环时，我不知道如何获取刚刚点击的图像的索引，我总是以最后一张图像的索引结束-我猜这是因为循环将遍历整个数组，这就是我添加break的原因；这应该能让我摆脱困境。它（显然）不起作用
*编辑：
IIFE解决了项目1，我添加了项目2的全部源代码：
<!DOCTYPE html>
<html>
<head>
    <title>Fade Out</title>
    <meta charset="utf-8">
    <style>
        #button {
            padding: 15px;
            background-color: grey;
            margin: 0 35%;
            }

        img {
            opacity: 1;
            transition-duration: 3s;
            }

        .fadeOutClass {
            opacity: 0;
            }
    </style>

</head>
<body>

<img class="new" src="media/1.jpg">
<img src="media/france.jpg">
<img class="new" src="media/2.jpg">
<img src="media/france2.jpg">
<img class="new" src="media/3.jpg">

<p id="button">Click me!</p>

<script>
    var button = document.getElementById("button");
        images = document.getElementsByClassName("new");


    button.onclick = function() {
        for (const i = 0; i < images.length; i++) {
            images[i].setAttribute("class", "fadeOutClass");
        }
    };

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


淡出
#钮扣{
填充：15px；
背景颜色：灰色；
利润率：0.35%；
}
img{
不透明度：1；
过渡时间：3s；
}
.淡出类{
不透明度：0；
}
点击我
var button=document.getElementById（“按钮”）；
images=document.getElementsByClassName（“新”）；
button.onclick=函数（）{
对于（常数i=0；i

我希望所有带有class=new
的图像同时淡出，但当我单击按钮时，只有第一个图像淡出。当我再次单击按钮时，下一个图像将淡出，依此类推。PROJECT1:
Try this:
var myArray = [123, 15, 187, 32];

myArray.forEach(function (value, i) {
    console.log('%d: %s', i, value);
});

您可以通过以下两种方法之一解决此问题
1.不要使用var关键字，而是使用let或const（请搜索网络以充分了解差异）
for（设i=0；i

这是现在编写代码更可取的方法。但是，它在旧浏览器上不起作用（例如：ie不支持它），所以如果您需要支持旧浏览器，则需要“编译”代码
2.将onclick包装到iife中（立即调用函数expresion）
for（var i=0；i

我将再次避免在这里完全解释这是如何工作的以及为什么工作的，请帮自己一个忙，在网上搜索什么是生活，为什么以及何时使用它
项目2：你的css可能有一些问题。你确定这个css类“fadeOutClass”存在并且正确实现和导入了吗？
你知道如何在浏览器中调试吗？你知道如何检查你的html吗？如果您这样做了，您将能够看到图像的“class”属性得到了正确的更新，因此没有问题。如果您没有，请搜索网络并学习如何执行此操作。
问题1的可能重复源于范围问题。for循环中使用的关键字var
具有误导性，var不限于for循环，其声明实际上被上移（如果在函数开头，则在函数内部，如果不在函数内部，则在函数开头）。然后，当调用click函数时，i
var仍然可见，但它现在已经具有循环中的最后一个值。在dupe中使用闭包将修复此问题。对于问题2，我们没有足够的信息，我想，有错误消息吗？问题1，您的循环在中断时只执行一次。这是有意的吗？应该是for循环中的iifect中的images[index]？似乎抛出了一个打字错误。让我说得更准确。见：
<!DOCTYPE html>
<html>
<head>
    <title>Fade Out</title>
    <meta charset="utf-8">
    <style>
        #button {
            padding: 15px;
            background-color: grey;
            margin: 0 35%;
            }

        img {
            opacity: 1;
            transition-duration: 3s;
            }

        .fadeOutClass {
            opacity: 0;
            }
    </style>

</head>
<body>

<img class="new" src="media/1.jpg">
<img src="media/france.jpg">
<img class="new" src="media/2.jpg">
<img src="media/france2.jpg">
<img class="new" src="media/3.jpg">

<p id="button">Click me!</p>

<script>
    var button = document.getElementById("button");
        images = document.getElementsByClassName("new");


    button.onclick = function() {
        for (const i = 0; i < images.length; i++) {
            images[i].setAttribute("class", "fadeOutClass");
        }
    };

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

Try this:
var myArray = [123, 15, 187, 32];

myArray.forEach(function (value, i) {
    console.log('%d: %s', i, value);
});

for (let i = 0; i < images.length; i++) {
    images[i].onclick = function() {
        images[i].src = "noun_2.png";
    };
}

for (var i = 0; i < images.length; i++) {
    (function(index){
        images[index].onclick = function() {
            images[index].src = "noun_2.png";
        };
    })(i)
}