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

JQueryでは、JavaScript配列を解析するために以下の構文を使用できます。

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

アラート（curVal）;
}）;

于 2013-03-21T12:55:23.333 に答える
0

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));
}

私がやっていることは、宣言された直後に自分自身を呼び出し、ループ counter の現在の値を渡す単一の引数 (この場合はループ インデックスを表す) を取る関数を作成することですi。

これは、スコーピングに関して前に述べたことによるものです。JavaScript はブロック スコープをサポートせず、関数スコープのみをサポートするため、すぐにそれ自体を呼び出す関数を作成すると、イベント リスナー関数が実行されると正しい値にアクセスできるように、ループ カウンターを格納するために必要なスコープが作成されます。

于 2013-03-21T12:46:00.310 に答える