Forループ内のJQueryイベントリスナー

Question

JqueryとtoggleClassを使用して、いくつかの基本的なボタンロールオーバー機能を作成しようとしています。私は自分のHTMLからDIVを複製し、それを複数回複製することによって要素のリストを構築しています（データベースからデータのリストを取り込む）。これを行うには、forループを使用しています。ここに現行のコードがあります。

  var displayNode = document.getElementById('phoneDisplayContainer');   
     for(var i=0; i<length; i++) { 
      //Clone the original container display. 
      var clonedDisplay = displayNode.cloneNode(true); 
      clonedDisplay.setAttribute('id', 'phoneDisplayContainer' + i); 
      //Remove hidden class from cloned Element. NOT CROSS BROWSER! 
      clonedDisplay.classList.remove('hidden'); 

      var children = clonedDisplay.getElementsByTagName('div'); 
      //Fill new nodes children containers with data. 
      children[1].innerHTML = contact.phone[i].type; 
      children[2].innerHTML = contact.phone[i].number; 
      children[3].setAttribute('onclick', 'PhoneUtility.edit(' + i + ');'); 
      children[3].setAttribute('id', 'phoneEditDisplay' + i); 
      children[4].setAttribute('onclick', 'PhoneUtility.remove(' + i + ');'); 

      //Hidden elements 
      var hidden = new Array(children[3], children[4]); 

      //Set rollover events. 
      clonedDisplay.setAttribute('onmouseover', '$("#' + children[3].id + '").toggleClass("hidden");'); 
      clonedDisplay.setAttribute('onmouseout', '$("#' + children[3].id + '").toggleClass("hidden");'); 

      //Append the new node to the display container 
      phoneContainer.appendChild(clonedDisplay); 
     } 
    } 

onmouseover属性を設定するのでjQueryのイベントリスナーを代わりに使用する方法はありますし、ONMOUSEOUT直接要素の？運で

$(clonedDisplay).mouseover(function() { 
    $(children[3]).toggleClass('hidden'); 
}); 

：

は、私はこれを試してみました。表示するだけで、リストの最後の要素にロールオーバーエフェクトが実行されます。これは実際にjQueryを使用した最初の試みです。コード内でjQueryを使用する方法についての他の提案も参考になります。

EDIT：forループで言及されたarraylistから複数の子供を切り替えることもしたいと思います。どのように私はこれを設定するのですか？私はエラーを取得せずに配列をjqueryコマンドに渡すことができません。

Answer 1

後に次のコードあなたのforループを使用すると、すべてのクローンに適用する一度にすべてのマウスオーバーとマウスアウトハンドラを割り当てさせる必要があります。

$('div[id^="phoneDisplayContainer"]').mouseover(function() { 
    $(this).find("div").eq(3).toggleClass("hidden"); 
}).mouseout(function() { 
    $(this).find("div").eq(3).toggleClass("hidden"); 
}); 

// or, given that both handlers do the same thing: 
$('div[id^="phoneDisplayContainer"]').on("mouseover mouseout", function() { 
    $(this).find("div").eq(3).toggleClass("hidden"); 
}) 

（あなたが1.7よりも古いのjQueryを使用している場合に.on()の代わりに.bind()を使用してください）。

上記の説明では、 "phoneDisplayContainer"で始まるIDを持つすべてのdivを検索し、イベントハンドラを割り当てています。ハンドラ内で、4番目の子孫divを見つけてクラスを切り替えます。

あなたはあなたのHTMLやCSSを表示しませんが、好きなだけあなたのCSSでこれを行うことができます。ホバーイベントをトラップするdivに共通のクラス（ "parentDiv"）を割り当て、その子div（隠すべきもの）に共通のクラス（ "childDiv"）を割り当てることができると仮定すると、これを行うことができます：それ以外の場合は

.parentDiv .childDiv { visibility: hidden; } 
.parentDiv:hover .childDiv { visibility: visible; } 

（もちろん、あなたの構造に合わせて、より意味のあるクラス名を付けることができます。）

、あなたはその後、後、あなたのループの適切なdiv要素にそれらのクラスを割り当てることができる場合は、再度、あなたがこれを行うことができますjQueryで：

$(".parentDiv").on("mouseover mouseout", function() { 
    $(this).find(".childDiv").toggleClass('hidden'); 
}); 

基本的には最初に述べたのと同じですが、セレクタのクラスを使用しています。あなたがクラスベースのソリューションをあなたに押し付けているような気がするなら、それは私のためです。それは、このようなことをもっと簡単にする傾向があります。