問題タブ [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.
javascript - データ属性を使用して JavaScript でコンテンツを編集することの欠点はありますか?
私は単純な Web アプリを開発しており、特定のイベントまたは条件の後に表示されたデータを更新する必要があります。このデータは、さまざまな場所に散らばっており、完全に別個のマークアップ構造内にあります。過去にクラスを使用したことがありますが、クラスを使用してデータを編集するときにいくつかの危険なケースが見つかりました (特に、OOCSS を使用していて、変更したいクラスがたくさんあり、js データまたは動作にバインドする必要がないため) . 以下の解決策は、この点で防弾である必要がありますが、それが使用されているのを見たことがないので、何かが足りないのではないかと心配しています。次のようなソリューションに欠点はありますか?
以下のコード例 - jQuery を使用
以下は、特定のデータ変更イベントにバインドされる場合があります。
});
マークアップは、いくつかの場所で次のようになります。
マークアップの他の場所には他のデータが含まれますが、完全に異なる html 構造内にあります。
jquery - jQueryはデータ属性を読み取り、正しいdivを非表示/表示します
行のデータ属性と、クリック時に同じデータ属性を持つ div を表示する機能を備えたテーブルを作成しようとしています。jquery関数をより簡単/スマートにする場合は、さらにデータ属性を追加できます。
すべてをうまくプレイするには、いくつかの助けが必要です:)
前もって感謝します!
編集: jsFiddle リンク: http://jsfiddle.net/MXpnQ/
javascript - HTMLデータ属性IE6のサポート
HTMLのデータ属性はIE6で機能しますか?
私はこのような属性を使用しています<img id="charm_1" data-code='sdfsdfsdfsdf' data-price='100' class='addition_image' src="img/misc/donut.png" width="55" height="55" alt="Donut">
。
ご覧のとおり、2つのデータ属性(価格とコード)があります。メソッドを使用してjQueryでこれを取得できますが、.data()
すべてIE7/8/9で機能するようです。これはIE6で機能しますか?これをテストするためのIE6のコピーがありません。
jquery - jQuery:URLの一部を含むdivを検索し、divにIDを追加します
「data-for」であるカスタムデータ属性が割り当てられているdivのリストがコードにあります。
私がする必要があるのは、URLの一部に一致するdata-for属性を持つdivを見つけることです。
たとえば、divのリストは次のようになります。
現在のページのURLがhttp://www.mysite.com/shops/north-west.htmlの場合、北西のデータ属性(div data-for = "north-west)を持つdivを検索します。 )そしてそれにIDまたはクラスを割り当てます。
誰かがこれで私を助けることができますか?divのリストは非常に長いため、スピーディーである必要があります。
よろしくお願いします。
jquery - jquery データ属性は先行ゼロを削除します
私はこのhtmlを持っています。
次のjQueryを使用して値を取得しています。
上記の jQuery コードは、先頭にゼロがない値をフェッチします。たとえば、上記のコードは991
の代わりにのみフェッチし00991
ます。何が問題なのですか?
jquery - jquerydatepicker-データ属性からオプションをオーバーライドします
このマークアップを使用しています
そのオプションオブジェクトをどこから始めればよいのかよくわかりません。デフォルト値から始めるのは良いスタートのようです。
しかし、データ属性の値をどのように追加/上書きするか..わかりません
javascript - カスタム正規表現を使用してフォームを検証する
カスタム データ属性を使用してフォームを検証したいのですが、その方法がわかりません。また、必要に応じてデータ属性にエラー メッセージを表示したいと考えています。
データ属性の正規表現値と一致し、対応する入力値と一致する JavaScript を探しています。
私は次のフォームを持っています..
jquery - jqGridを使用してテーブル行にデータ属性を作成する
jQueryプラグインjqGridを読み込もうとしていますが、ドキュメントとデモをざっと読んでいると不足しています。
私が達成したいのは、JSONデータの一部を使用して列に表示し、他の部分を使用して各テーブル行にHTML5データ属性を作成することです。ただし、jqGridがこれを処理できるかどうか、および処理できる場合はどのように処理できるかを理解できません。
私がやりたいことの例:
以下のデータから(読みやすくするために空白を追加)
次のテーブルを作成したいと思います。
ご覧のとおり、データ属性には、行のプロパティと同じ名前が付けられている場合とされていない場合があります。また、この例には示されていませんが、一部のプロパティは、テーブルに表示するためとデータ属性のために使用されます。
JSONデータを提供するAPIは他の場所で使用されているため、変更することはできません。データ属性の要件は、他の場所で使用されている別の(自己作成の)jQueryプラグインによっても定義されているため、変更することもできません。
jqGridでこれを達成する方法はありますか?もしそうなら、どのように?そうでない場合、どのようなオプションがありますか?
php - JSON でエンコードされた HTML5 データ属性での一重引用符のエスケープ/エンコード
PHP では、json_encode()
HTML5 データ属性で配列をエコーするために使用します。JSON ではjson_encode()
、二重引用符でカプセル化された値が必要であり、生成されます。そのため、次のように、データ属性を一重引用符で囲みます。
ご覧のとおり、最後のタグ (test の) には一重引用符が含まれておりjson_encode()
、オプションなしで使用すると解析の問題が発生します。
だから私はパラメーターで使用json_encode()
しJSON_HEX_APOS
、一重引用符がエンコードされているため、解析は問題ありませんが、このようにする欠点はありますか?
javascript - Impress.js と CSS 変換の代わりに HTML5 データ属性を使用する
Impress.jsを使用してプレゼンテーションに取り組んでおり、iPad での使用に適応させることを考えていました。しかし、Impress が各スライドに変形を適用する方法が気になります。CSS を使用するだけでなく、変換をデータ属性として HTML に配置し、Javascript で適用します。
これは非常に複雑で難しい方法だと思います。ただし、データ属性を扱った経験はあまりないので、これについて意見を求めたいと思いました。普通にCSSを書いたほうがいいのでしょうか、それともdata属性を使うメリットの方が面倒でしょうか?