data- *属性に基づいて要素を表示/非表示にする

Question

これはJQueryには些細でなければならないようですが、この関数はフォーム全体を隠しています...誰かが正しい方向に向かうことができますか？

$('form') 
     .children() 
     .filter(function(){ 
      return $(this).data('show', 'pro') 
     }) 
     .show(); 
$('form') 
     .children() 
     .filter(function(){ 
      return $(this).data('show', 'home') 
     }) 
     .hide(); 

Answer 1

data methodに2つの引数を渡しているため、古い値を取得する代わりに設定します。

利用代わりに、この：

$('form') 
     .children() 
     .filter(function(){ 
      return $(this).data('show') === 'pro'; 
     }) 
     .show(); 
$('form') 
     .children() 
     .filter(function(){ 
      return $(this).data('show') === 'home'; 
     }) 
     .hide(); 

ます。また、パフォーマンスのために、あなたのセレクタをキャッシュ（またはendを使用する）ことができます。

Answer 2

あなたはコードから何をしようとしているのかよくわかりません。 JQと "データ - " にアクセスする

、私が使用します。

$(elementSelector).attr('data-XXX'); 

データ-XXXは、タグの属性です。これは私が見たIE7に戻るすべてのブラウザで機能します。

Answer 3

データ・ショーの値は、あなたのHTML内にある各オブジェクトの属性として設定されている場合は、セレクタで完全にこれを行うことができます。説明として

$('form > [data-show="pro"]').show(); 
$('form > [data-show="home"]').hide(); 

：

• form明らかフォーム要素
• >フォームオブジェクト
• [data-show="pro"] SEの子を選択し、選択lectsデータ・ショーの値は.data() jqueryのメソッドで設定されている場合.show()は、それらの選択したオブジェクト

のshowメソッドを呼び出します"pro"

の値に設定されているdata-showという名前の属性を持っている唯一の子供たち前の方法ではうまくいかない場合は、セレクタでより簡単に使用できるデータ値ではなく、クラス名として状態を設定するほうがよいでしょう。これらの値はデータの代わりにクラス名として設定された場合、コードは次のようになります。

$('form > .pro').show(); 
$('form > .home').hide(); 

は覚えておいてください、あなたは直接のプレゼンテーションを制御するために使用されるオブジェクトとオブジェクトの状態で複数のクラス名を持つことができますCSSやjQuery操作のセレクタで使用する方がはるかに簡単であるため、オブジェクト（CSSスタイル、可視性、書式など）はdata-xxx属性ではなくクラス名として表現するほうがはるかに優れています。