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

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

            var displayNode = document.getElementById('phoneDisplayContainer');         
        for(var i=0; i

要素上でonmouseoverとonmouseoutを直接設定する代わりに、Jqueryイベントリスナーを使用する方法はありますか?

私はこれを試した:

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

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

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

0
これを jsfiddle.net に投稿してください。私はあなたの作業例を見て、あなたが望むならそれを簡単なjQueryに変える方法を示します。
追加された 著者 JesseBuesking,
私はJesseBと一緒です - jQueryがあなたが .on()イベントバインディングユーティリティで何をしたいのかを知っていることを知っているほとんどの人は、回答。私はたくさんの仮定と推測を使用して、「実際のシナリオを知るためにはもっと良い」と言った。それは、 .on()(jQuery 1.7+用)があなたが探しているものです。
追加された 著者 Greg Pettit,

1 答え

次のコードでは、すべてのクローンに適用するために、すべてのマウスオーバーハンドラとmouseoutハンドラを一度に割り当てることができる after

$('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');
});

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

1
追加された
CSSソリューションはもっと意味があります。はるかに複雑な解決策で問題を攻撃しようと少し愚かに思っています。ありがとう。私のオリジナルの質問のために、あなたのコードはとても近いです。複数の子要素で隠れたクラスをどのように切り替えるのですか?
追加された 著者 ryandlf,
それについて考えると、コンテナdiv内の子供に隠れたクラスの場所があるため、CSSのアプローチは機能しません。コンテナdivの上にカーソルを置くと、子クラスではなく、独自のクラスにのみ影響します。
追加された 著者 ryandlf,
CSSのアプローチは、コンテナーの上にマウスを置いたときに、含まれているdivの子を非表示にして表示するようにうまく機能します。このシンプルなデモを見てみましょう: jsfiddle.net/pYeJc (JSがないことに気付くでしょう)。 CSS containerSelector:hover childSelector {} は、現在ホバリングしているcontainerSelecdtorと一致する要素の子孫であるchildSelectorに一致する要素に設定を適用します。 (注:IEを使用している場合は、少なくともバージョン7以上が必要です。他のブラウザでも問題ありません)。
追加された 著者 nnnnnn,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript