問題タブ [custom-data-attribute]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
jquery - HTML5データ属性を介したjQueryループ
私はすべてこれに似ている一連のオブジェクトを持っています:
各データ属性を動的にプルする関数を作成したいので、「data-icon」などの属性を追加しても、関数は次のようなすべてのデータ属性の配列を返します。
javascript - data- 属性のサイズ制限はありますか?
重複の可能性:
HTML 属性の長さに制限はありますか?
data- 属性を使用して、Web ページ上のスクリプト間で JSON を渡したいと考えています。たとえば、div タグは次のようになります。
これは、たとえば dojo ツールキットがオプションで行うことと似ていますが、私の場合、JSON 文字列はもっと長くなる可能性があります。
data- 属性のサイズ制限はありますか (W3C 勧告、ブラウザーの制約など)?
jquery - データ属性からのAJAXロードURL-構文またはブラウザの互換性が悪いですか?
ウェブサイト
開発中のビルドはrandomactsofviolet.comで見ることができます
含まれているライブラリ:
- vaccordian
- マウスホイール
- jquerytools
- イージング
vaccordianは、コンテンツのさまざまなページを上下にシフトするための「スクロール可能な」要素(JQueryツール)を埋め込みます
標的
JQueryの/Ajax.load()メソッドを使用して動的コンテンツをロードし、JQueryの.data()メソッドを使用して取得しているURLを渡そうとしています。データ属性「state」を使用してコンテンツがすでにロードされているかどうかをテストし、状態が未定義の場合にのみload()関数を呼び出すことにも注意してください。
FirefoxとDreamweaverのプレビューウィンドウ内で完全な機能を取得できたので、構文とデータ属性の使用の両方が正しいという印象を受けましたが、私のメソッドがchromeまたはIE9で機能しないことがすぐに明らかになりました。
私の調査では、.data()メソッドと.data()がjquery 1.4以降に含まれているため、両方がブラウザー間でサポートされていることが示唆されています。
問題は私の構文にあるのでしょうか?別の方法がある場合は、提案をいただければ幸いです。
Steven Donsは、attr()を使用すべきではない理由について良い議論をしています。:
特にデータを読み取るのではなく操作する場合は、可能ですが、すべきではありません。> attr()を使用すると、データはDOMに戻ります。data()を使用すると、個別に保持されます。> attr()で値を変更し、次にdata()で値を読み取ると、異なる値が得られます。また、> attr()は文字列のみを処理し、data()は整数などのネイティブ型に変換されます。>何をするにしても、自分が何をしているのかを本当に理解していない限り、attr()とdata()の使用を混在させないでください。私の経験則では、attr()を使用して元のDOMメタデータを読み取るか、DOM>プロパティを変更し、data()をアプリケーションの状態に使用します。–スティーブンドン3月17日10:44
現在の構文
使用中のHTML
私の調査
URLがdiv要素から取得されていないか、ajaxの使用に問題がありますか?Javascriptが有効になっています。私はスタックでかなりの読書をし、このトピックに関する他のいくつかの有用な問題に遭遇し、いくつかの有用な考慮事項を学びましたが、このシナリオでは問題を明確にすることができません。潜在的に、これは厄介な単純なものであり、HTMLの上部にあるブラウザに何かを有効にしたり、特定の構文
を許可したりする必要があることを決して忘れないことを願っています。 Firefoxのインスペクター内。ライブメッセージ/エラーを表示するためにそれを使用する方法、またはインスペクターを使用して問題を診断する方法を誰かが説明できますか?
jquery - divを表示および非表示にするjQueryの単純なチェックボックス(製品フィルタリング)
私はjQueryを使用してページ上の製品アイテムをフィルタリングしています(DIVの非表示と表示)。PHP$ _GETは少し古い方法であるため、代わりにフィルターを使用しています。これはjQueryを介して実行しようとしています。filter()とdata属性を使用しています。
既存の項目を除いて、チェックボックスの現在の選択をオフにするにはどうすればよいですか?選択に基づいてアイテムを非表示にし、そうでない場合は再表示するにはどうすればよいですか?
HTML
jQUERY
CSS
JSFiddle
javascript - ボタンの「data-」属性を使用して、選択したJavaScript関数を呼び出す方法
ボタンにアクセスできるように、いくつかのデータを設定しようとしていますonclick
。キー値が文字列であるボタンのデータ属性でJSONを使用しても問題はありません。ただし、値を関数に設定する方法がわかりません。
このデモコードのボタンをクリックしたときに発生したいのは、クリックイベントが関数を呼び出してoption1()
、文字列「hellooutside」を警告することです。
私が得ているエラーはこれです:
HTML(JSFiddleはここにあります:http://jsfiddle.net/NDaEh/32/ ):
JS:
考え?
jquery - データ属性の正規表現--jquery
私は現在のhtmlを持っています:
これらは独立したdivであり、ajaxを介してデータを送信するときに一緒に使用することも使用しないこともできます。
今、私が持っている1つのオプションは両方のフィールドを使用することでありdata-value
、いくつかのフォームオプションに基づいて両方のフィールドを取得する必要があります。データ属性が異なります(さまざまな目的で使用されます-すべてのグループを送信することも、個別に送信することもできません)
だから私はしたい:
$('input').data('group*')
しかし、それは機能しません、そして私は正規表現が必要であることに気づきます。
使用できるデータ属性の正規表現はありますか?
javascript - データ属性内のオブジェクトのプロパティに基づいて要素を選択する方法は?
マークアップが次のようになっている場合:
キー「bar」または「foo」しかない場合、JQuery を使用して特定の要素を選択するにはどうすればよいですか?
各行のオブジェクト全体を取り出して、一致するものを探して反復処理することもできますが、より効率的な方法がある場合はそうしません。
オブジェクトのプロパティに基づいてきれいに選択するにはどうすればよいですか?
jquery - jQueryを使用してiPadの向きに基づいて異なるテキストを表示する
縦向きモードのときだけiPadに別のテキストを表示したい。
データ属性を使用して縦向きのテキストを保存できますが、向きの変化を検出してiPadにテキストを適用するにはどうすればよいですか?
私のマークアップは現在このようになっています。
ありがとう
ruby-on-rails-3 - Rails3でデータ属性を使用するには?
次のようなHTML選択構文があります。
Rails構文でこれを機能させるにはどうすればよいですか? 上記の結果を得るには、以下のコードでどのような変更を行う必要がありますか:
また、このコードで「選択済み」オプションを使用したいと考えています。
javascript - クラスとデータ属性、自動フィールド初期化子
少し背景
フィールドをループし、ドロップダウン、オートコンプリート、テキストなどに応じてフィールドを設定するメソッドをjavascript/jQueryで作成しました...
この理由は、入力とテキストエリアを特別にスタイル設定しており、ページがロードされたら JavaScript で初期化する必要があるためです。このクラスのメソッドは、ページの各フィールドをループし、その内容に基づいてイベントを設定します。
現時点では、フィールドコンテナにクラスを与えることで各フィールドが何であるかを検出しています.jQueryはこのクラスを読み取り、それに応じてフィールドを次のように設定します:
jQuery は次のようになります。
上記のコードのほとんどは無視できますが、私が何をしているのかがわかるはずです...
質問
私は最近、HTML5 属性data-*
に気付きました*
。私の質問は次のとおりです。
- クラスの代わりにHTML5
data-*
属性を使用する必要がありますか? data-*
属性またはクラスよりも優れた方法はありますか?data-*
属性は HTML5 ですが、正しくDOCTYPE
定義されていれば初期のブラウザと互換性がありますか?