0

所以我正在学习如何使用 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

我在这里做错了什么？

<------------更新：------------>

这是我目前的代码，在确定我需要一个数组来完成我想做的事情之后。我测试了我的数组变量循环，该部门的一切似乎都运行良好。

我现在遇到的下一个问题是让 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);
}

想法？

4

3 回答 3

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);
    ...
}
于 2013-03-21T12:51:15.630 回答
0

如果您在 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));
}

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

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

于 2013-03-21T12:46:00.310 回答
0

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

$.each(curVal, function(i, array){

警报（curVal）；
});

于 2013-03-21T12:55:23.333 回答