0

jQueryの配列に関する基本的な質問だと思いますが、困惑しています-私ができるようにしたいのは、DOM要素の多数の配列を作成し、それぞれのインデックス番号が等しく、それらにアクセスすることですインデックスを作成し、そのインデックスに従って jQuery メソッドを実行します。

たとえば、最初の配列のメンバー i に対してクリック アクションを実行し、i が他の配列メンバーの対応する i をターゲットにしたいとします。したがって、次の例では、arrayOne[1] をクリックすると arrayTwo[1] と arrayThree[1] のみに影響し、arrayOne[2] をクリックすると arrayTwo[2] と arrayThree[2] などにのみ影響します。

「for ループ」、.each() メソッド、.map() を使用して、jQuery.each() メソッドで遊んでみましたが、何も機能していません。すべてのキー/値メンバーが影響を受けるか、1 つのキー/値メンバーのみが影響を受けます。私は非常に多くのことを試してきたので、特定の問題ではなく代表的な問題セットを示しています。うまくいけば、これで問題を十分に解決できると思います。

var arrayOne=['.selectorOne_a', '.selectorOne_b', '.selectorOne_c'];

var arrayTwo=['.selectorTwo_a', '.selectorTwo_b', '.selectorTwo_c'];

var arrayThree=['.selectorThree_a', '.selectorThree_b', '.selectorThree_c'];

for(i=0; i<=arrayOne.length-1; i++){ 
     $(arrayOne[i]).click(function(){
          $(arrayTwo[i]).show();
          $(arrayThree[i]).hide();
     });//click
}

forループはこれを行う正しい方法ではないことはわかっていますが、これは私が試した代表的な方法としてのものです...単純なはずですよね？これが多次元配列、ハッシュ、what-have-you のルーブリックに該当するかどうかはわかりません。そのため、これらの概念をナビゲートするためのアドバイスやチュートリアルへのリンクも大歓迎です。これが理にかなっていることを願っています。アドバイスをいただければ幸いです。

ありがとう！

4

4 に答える 4

1

作成しているクリック ハンドラー内では、関数の外部で定義されている変数iを参照しており、クリックに応答してハンドラーが呼び出されるまでに、適切な関連を参照するのではなくi、ループの最後にあったものになります。forエレメント。これは、クロージャーを導入することで修正できます。

for(i=0; i < arrayOne.length; i++){
   (function(i){
      $(arrayOne[i]).click(function(){
          $(arrayTwo[i]).show();
          $(arrayThree[i]).hide();
      });
   })(i);
}

JS 関数が実行されると、含まれるスコープが実行を終了した関数であっても、含まれるスコープ内の変数にアクセスできます。したがって、上で紹介した無名関数は、forループの反復ごとに呼び出され、そのiパラメーターは、渡した関数から引き続きアクセスできます.click()。

for(条件はi < arrayOne.length, notである必要があることにも注意してくださいi<=arrayOne-1。配列から 1 を引くことはできません。)

jQuery を使用しているので、これをより整然とした方法で行うことができます。

$.each(arrayOne, function(i,val) {
     $(arrayOne[i]).click(function(){
          $(arrayTwo[i]).show();
          $(arrayThree[i]).hide();
     });
});

私の意見では、全体的なより良い解決策は、配列を使用するという考えを放棄することです。HTML 構造内の要素を何らかの方法で関連付けてから、クリック ハンドラー内で DOM トラバーサル メソッドを使用して、関連する要素を見つけて表示および非表示にします。おおよそのhtml構造を表示するように質問を更新した場合は、これについてさらにアドバイスできます。

于 2012-07-16T01:52:04.893 に答える
0

nnnnnn の提案に従った後、問題を解決するために使用した最終的なコードを次に示します。これは完全に機能し、必要に応じて変更して、流動的な応答性のために構築されたマークアップに同様のセクションを作成できます。注意すべきことの 1 つは、css スプライトを使用してロール オーバー状態を作成することができなかったことです。これは不利な絶対配置を伴うため、jQuery/javascript でスワップ イメージ効果を作成することにしました。

    function createClick2(){

    // clickElements are the clickable images which trigger all subsequent actions
    var clickElements= ['.subheader_li_header1 img','.subheader_li_header2 img','.subheader_li_header3 img'];

    //once clickElements are clicked, a specific list appears underneath each clickElement member. These lists are class members of the listShow array
    var listShow= ['.subheader_ul_anim1','.subheader_ul_anim2','.subheader_ul_anim3'];

    // when clickElements are hovered over, an image is swapped- this is the imgSwapOver array
    var imgSwapOver=['img/sidebar_create_over.png','img/sidebar_develop_over.png','img/sidebar_design_over.png'];

    //on mouse out, or double tap, (depending on the device) the image is swapped back in.
    var imgSwapUp=['img/sidebar_create_up.png','img/sidebar_develop_up.png', 'img/sidebar_design_up.png'];

    // counter for holding click information
    var clickCount=0;

    $.each(clickElements, function(i,val) {

        $(clickElements[i]).click(function(){ 
            clickCount++;
            if(clickCount==1){          
                $(listShow[i]).show('slow', function(){
                    $(this).css("display","block");
                    $(clickElements[i]).attr("src", imgSwapOver[i]);//concession for mobile browser

                });//show
            }//if
            else if(clickCount==2){
                $(listShow[i]).hide('slow', function(){
                    $(this).css("display","none");
                    });//hide
                $(clickElements[i]).attr("src", imgSwapUp[i]);//concession for mobile browser
                    clickCount=0;
            }//else if
                }).hover(function(){$(clickElements[i]).attr("src", imgSwapOver[i]); },function(){$(clickElements[i]).attr("src", imgSwapUp[i]); 

                });//hover          
    });//each
}//createClick2
于 2012-07-16T16:54:06.440 に答える
0

その場合、他の方法を使用して目標を達成することもできると思います。それらのインデックス値を見つけて、対応する div をターゲットにするために使用できます。

簡単なデモを見る

<div class="Array1">
    <div class="selectorOne_a">Array1 a</div>
    <div class="selectorOne_b">Array1 b</div>
    <div class="selectorOne_c">Array1 c</div>
</div>
<div class="Array2">
    <div class="selectorTwo_a">Array2 a</div>
    <div class="selectorTwo_b">Array2 b</div>
    <div class="selectorTwo_c">Array2 c</div>
</div>
<div class="Array3">
    <div class="selectorThree_a">Array2 a</div>
    <div class="selectorThree_b">Array2 b</div>
    <div class="selectorThree_c">Array2 c</div>
</div>

Jqueryコード

$(".Array1 div").click(function() {
   index = $(this).index();
   $(".Array2 div:eq("+ index +")").css('background-color','red');//You can do show/hide or add class etc.
   $(".Array3 div:eq("+ index +")").css('background-color','green');
});

</p>

于 2012-07-16T01:57:45.513 に答える
0

これはかなり奇妙なことですが、必要な場合は、ループ アプローチが確実に実行可能です。ただし、イベント ハンドラが の正しい値を確実に取得するように対策を講じる必要がありますi。あなたが書いたように、i各ハンドラーが起動するときの値は、ハンドラーが配置されたときの値であるとは限りませんi。

この問題を解決するには、さまざまな方法があります。

閉鎖

ループの各反復で、(a) の値をキャプチャし、i(b) 実際のイベント ハンドラになる関数を返す「クロージャ」を形成します。

var arrayOne = ['.selectorOne_a', '.selectorOne_b', '.selectorOne_c'];
var arrayTwo = ['.selectorTwo_a', '.selectorTwo_b', '.selectorTwo_c'];
var arrayThree = ['.selectorThree_a', '.selectorThree_b', '.selectorThree_c'];
for(i=0; i<=arrayOne.length-1; i++) {
     $(arrayOne[i]).on('click', function(n) {
          return function() {
              $(arrayTwo[n]).show();
              $(arrayThree[n]).hide();
          }
     })(i);
}

わかりやすくするためnに、「i」の代わりにクロージャを使用しました。i全体を通して使用する方が、明確ではありませんが、おそらくより一般的です。

。データ（）

jQuery の.data()メソッドを使用して、DOM 要素にその値を「認識」させることができiます。

var arrayOne = ['.selectorOne_a', '.selectorOne_b', '.selectorOne_c'];
var arrayTwo = ['.selectorTwo_a', '.selectorTwo_b', '.selectorTwo_c'];
var arrayThree = ['.selectorThree_a', '.selectorThree_b', '.selectorThree_c'];
for(i=0; i<=arrayOne.length-1; i++) {
     $(arrayOne[i]).data('index', i).on('click', function() {
        var i = $(this).data('index');
        $(arrayTwo[i]).show();
        $(arrayThree[i]).hide();
     });
}

。各（）

メソッドを使用しjQuery.each()てループを形成できます。

var arrayOne = ['.selectorOne_a', '.selectorOne_b', '.selectorOne_c'];
var arrayTwo = ['.selectorTwo_a', '.selectorTwo_b', '.selectorTwo_c'];
var arrayThree = ['.selectorThree_a', '.selectorThree_b', '.selectorThree_c'];
$.each(arrayOne, function(i) {
     $(this).on('click', function() {
        $(arrayTwo[i]).show();
        $(arrayThree[i]).hide();
     });
});

これはおそらく最も簡単な方法です。見た目は異なりますが、実際にはクロージャーの形成に非常に似ていますが、詳細は jQuery によって処理されます。

于 2012-07-16T02:56:39.753 に答える