Javascript字符串語法和for循環邏輯

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

我在這里做錯了什么？

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

這是我目前的代碼，在確定我需要一個數組來完成我想做的事情之后。 我測試了我的數組變量循環，該部門的所有工作似乎都正常。

我現在遇到的下一個問題是使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循環構造對其進行迭代：

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不支持塊作用域，而僅支持函數作用域，因此創建一個立即調用自身的函數將創建您需要存儲循環計數器的作用域，以便一旦執行事件偵聽器函數，它將訪問正確的值。

Answer 3

在JQuery中，您可以使用以下語法來解析javascript數組：

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

警報（curVal）;
}）;