Question

我是一个沮丧的新手，他正试图完成一些项目，但我总是被卡住......按照同样的原则（我相信）。请问有人可以帮助我吗？ ;）

项目1：

单击图像时，我想更改其src属性。当我循环浏览images数组时，我不知道如何获取刚刚点击的图像的索引，我总是以索引结束最后一张图片 - 我想这是因为循环会遍历整个数组，这就是为什么我添加了break;这应该让我走出循环。它显然不起作用。

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

项目2：

单击该按钮时，我希望class="new"的图像淡出。我不明白为什么代码不起作用。

<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");
    var images = document.getElementsByClassName("new");

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

*编辑： 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>

我希望class=new的所有图像同时淡出，但是当我点击按钮时，只有第一张图像淡出。当我再次单击该按钮时，下一个图像淡出，依此类推。

Answer 1

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

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

Answer 2

PROJECT1：你可以通过两种方式解决这个问题。

1.不要使用var关键字，而是使用let或const（请搜索网络以完全理解差异）

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

这是现在编写代码的更明智的方法。它虽然不适用于旧的浏览器（例如：即不支持），所以如果你需要支持旧的浏览器，你需要“编译”你的代码。

2.将你的onclick包裹在一个iife中（立即调用函数expresion）

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

我再也不会在这里完全解释这是如何以及为什么这样有效，请帮自己一个忙，并在网上搜索生命是什么，为什么以及何时使用它

PROJECT2：你的css可能有些麻烦。你确定这个css类'fadeOutClass'存在并正确实现和导入吗？你知道如何在浏览器中调试吗？你知道如何检查你的HTML吗？如果你这样做，你将能够看到你的图像的“类”属性正确地得到更新，所以没有问题。如果您不这样做，请搜索网络并了解如何执行此操作。

JavaScript：获取带有for循环的数组索引

2 个答案: