0

CSS チルダ セレクターについて知りましたが、これは入力の可視性の切り替えを処理するエレガントな方法のようです。

私が念頭に置いているユースケースは、ユーザーがチェックボックスをオンにしたときにのみ入力を表示したい場合です。現在、私はこれを javascript で行い、各チェックボックスにリスナーをアタッチします。リスナーは、DOM を検索して適切な入力を見つけ、クラスを切り替えます。

問題は、なぜこれが悪いのかということです。そうでない場合、なぜこれが普及していないのですか？CSS ではなく .js でこれを行うのはなぜですか? どちらもかなり似た方法でプレゼンテーション層を操作しているように私には思えます...

リソースのボーナスポイント。

4

3 に答える 3

1

HTML はモデルであり、データが含まれます
CSS はビューであり、スタイルが含まれます
JS はコントローラーであり、インタラクションが含まれます

この MVC 構造により、強力な責任の委任が可能になります。ページ上のウィジェットの状態を変更したい場合、JavaScript を使用して利用可能なスタイリング フックを変更できます。

簡潔にするために jQuery を使用 
$('#button').on('click', function () {
    $('#widget').toggleClass('hidden');
});
CSS: 
.hidden {
    display: none;
}

この構造を使用すると、相互作用の実行方法を簡単に変更できます。後でウィジェットをアニメーション化することに決めた場合、それは簡単な変更です。

JavaScript を使用すると、下位互換性があるという利点もあります。JavaScript を無効にしているユーザーの割合は非常に少ないです。JS が無効になっているユーザーをサポートすることを強くお勧めしますが、これは多くの場合、デフォルトですべてのコンテンツを表示し、JS が有効になっているユーザーに対してのみコンテンツを非表示にすることで実現できます。

于 2013-02-06T16:23:41.303 に答える
0

私が考えているユースケースは、ユーザーがチェックボックスをオンにしたときにのみユーザーに入力を表示したい場合です。

そのためにセレクターを使用することを計画している場合:checked、アプリは古いブラウザー（IE <9）では実行されません。この制限に問題がない場合、つまり、関係する最新のブラウザーのみが問題ない場合は、CSSも問題なく機能します。

JSを使用すると、ユーザーがJSを有効にしている場合、サイトが古いブラウザーでも実行されるようになります。

両方を組み合わせて使用​​することもできます。これにより、JSが無効になっているブラウザやJSが有効になっている古いブラウザでも、ページが最新のブラウザで機能するようになります。

<noscript>多くの場合、ブラウザーが特定のCSSセレクターをサポートしているかどうかを判断するよりも、ブラウザーでJSが無効になっているかどうか（内部のスタイルシートを使用するなど）を検出する方が簡単です。
したがって、JSソリューションを使用すると、ページのJSを有効にするようにユーザーに求める免責事項を簡単に配置できます。

ただし、繰り返しになりますが、サイトがIE8以下を使用している可能性のある一般の人々を対象としていない場合は、CSSソリューションで問題なく動作します。

于 2013-02-06T16:22:37.327 に答える
0

チルダ セレクターまたは一般的な css を使用して問題を解決できる場合は、それを選択してください。CSS imhoは、jsでアイテムを切り替えるのと同じことを達成するための、よりクリーンで、通常はより簡潔で優れたパフォーマンスの方法です。さらに、チルダのブラウザー サポートは非​​常に優れています。http: //www.quirksmode.org/css/contents.html を参照してください。

これを実現するために JavaScript を使用する必要がある場合があります。たとえば、非表示にする要素が問題の要素の兄弟または子孫ではない場合です。

于 2013-02-06T16:29:36.813 に答える