Question

所以我正在学习如何使用javascript执行循环，并正在研究如何使用数组来完成它。我理解如何创建数组，但我不清楚的是在循环中使用它。所以我想象一下那些“在循环中制造一个数组”的例子，就像我认为我在这种情况下所做的那样。

我想要做的是使用javascript来更改页面上不同dom元素的类。我不想做的是用不同的数值反复重复相同的代码。我以为我把一切都做对了，但显然我没有。这是我的代码：

<script>
for (var i = 0; i < 11; i++) {
    var storyImageSubmit + [i] = document.getElementById('story_image_' + [i]);
    var realImageUpload + [i] = document.getElementById('realImageUpload' + [i]);

    realImageUpload + [i].addEventListener('mouseover', over_profile_image_submit_ + [i], false);
    realImageUpload + [i].addEventListener('mouseout', out_profile_image_submit_ + [i], false);
    realImageUpload + [i].addEventListener('mousedown', down_profile_image_submit_ + [i], false);
    realImageUpload + [i].addEventListener('mouseup', up_profile_image_submit_ + [i], false);

    function over_profile_image_submit_ + [i] + () {
        storyImageSubmit + [i].className = "accountSettingsBrowseSubmitHover"; 
    }
    function out_profile_image_submit_ + [i] + () {
        storyImageSubmit + [i].className = "accountSettingsBrowseSubmit"; 
    }
    function down_profile_image_submit_ + [i] + () {
        storyImageSubmit + [i].className = "accountSettingsBrowseSubmitDown"; 
    }
    function up_profile_image_submit_ + [i] + () {
        storyImageSubmit + [i].className = "accountSettingsBrowseSubmit"; 
    }
}
</script>

我希望代码看起来像是什么，但使用1-10的不同数值迭代，是这样的：

<script>
for (var i = 0; i < 11; i++) {
    var storyImageSubmit1 = document.getElementById('story_image_1');
    var realImageUpload1 = document.getElementById('realImageUpload1']);

    realImageUpload1.addEventListener('mouseover', over_profile_image_submit_1, false);
    realImageUpload1.addEventListener('mouseout', out_profile_image_submit_1, false);
    realImageUpload1.addEventListener('mousedown', down_profile_image_submit_1, false);
    realImageUpload1.addEventListener('mouseup', up_profile_image_submit_1, false);

    function over_profile_image_submit_1() {
        storyImageSubmit1.className = "accountSettingsBrowseSubmitHover"; 
    }
    function out_profile_image_submit_1() {
        storyImageSubmit1.className = "accountSettingsBrowseSubmit"; 
    }
    function down_profile_image_submit_1() {
        storyImageSubmit1.className = "accountSettingsBrowseSubmitDown"; 
    }
    function up_profile_image_submit_1() {
        storyImageSubmit1.className = "accountSettingsBrowseSubmit"; 
    }
}
</script

我在这里做错了什么？

＆LT; ---------------------- UPDATE：--------------------- - ＆GT;

这是我的代码，在确定我需要一个数组来完成我想做的事情之后。我测试了我的数组变量循环，该部门的所有内容似乎都运行正常。

我现在遇到的下一个问题是让javascript不要重写每次迭代定义的监听变量。我决定最好的方法是消除循环中的任何变量，以便每个侦听和函数执行都是唯一的。我这样做的假设是重写我的变量是它不能工作的原因。但即便这样做，它也行不通。

<script>
var storyImageValue = ["1","2","3","4","5","6","7","8","9","10"];
for (var i = 0; i < storyImageValue.length; i++) {
    document.getElementById('realImageUpload' + storyImageValue[i]).addEventListener('mouseover', function () { document.getElementById('storyImageSubmit' + storyImageValue[i]).className = "accountSettingsBrowseSubmitHover"; }, false);
}

思想？

Answer 1

尝试这样的事情：

for (var i = 1; i <= 10; i++) {
    var storyImage = document.getElementById('story_image_' + i);
    var realImage = document.getElementById('realImageUpload' + i);

    realImage.addEventListener('mouseover', function () { storyImage.className = "..."; }, false);
    ...
}

Answer 2

如果你有一个JavaScript数组，这就是你可以用for-loop结构迭代它的方法：

var arr = [1, 2, 3], i, element;
for (i = 0; i < arr.length; ++i) {
    element = arr[i];
    // Now do whatever you want with element within this loop.
}

根据您的评论

更新：

您在评论中的代码中发生的事情是变量i没有为您的目的正确确定范围。事实上，在JavaScript中，没有块范围，只有函数范围......

这意味着无论何时调用事件监听器函数，它都会获得i的值，但该值始终是循环中使用的最后一个值。在这种情况下，10。

试试这样：

var storyImageValue = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];

for (var i = 0; i < storyImageValue.length; i++) {
  (function (index) {
    document.getElementById('realImageUpload' + storyImageValue[index]).addEventListener('mouseover', function () {
        document.getElementById('storyImageSubmit' + storyImageValue[index]).className = "accountSettingsBrowseSubmitHover";
    }, false);
  }(i));
}

我正在做的是我正在创建一个函数，该函数接受一个参数（在我们的例子中表示循环索引），它在声明后立即调用自身，传入循环计数器{{1}的当前值}。

这是因为我之前提到的范围界定。由于JavaScript不支持块作用域，而只支持函数作用域，因此创建一个立即调用自身的函数将创建存储循环计数器所需的作用域，以便在执行事件监听器函数后，它将访问正确的值。

Answer 3

在JQuery中，您可以使用以下语法来解析javascript数组：

$。each（curVal，function（i，array）{

警报（curVal）;
}）;

Javascript字符串语法和for循环逻辑

3 个答案: