-3

ページ上のカスタムカラー要素の管理に問題があります。

たとえば、ページには100個のナビゲーション正方形があり、それぞれに独自の色があり、色の種類ごとにcssクラスを作成する以外の方法は考えられません。これにより、多くのcssコードが生成されます。

これについて助けが必要です、ありがとう

*この質問を解決するための可能な方法の1つとしてjavascriptとjqueryタグを追加しました

更新： 回答者に感謝します。詳細を確認する必要があるように感じます。検索ページに2乗のカテゴリナビゲーションがあるので、色はサーバー側から移動することも、クライアントのjsに保存することもできます。サーバーからカテゴリのリストを取得しています（それぞれの色も取得していると仮定します）次に、すべての正方形を作成します（デフォルトでは白ですが、ホバーすると色が変わります）。

<ul id="squares">
<li class="greencolor"></li>
<li class="redcolor"></li>
<li class="bluecolor"></li>
</ul>

cssを使用：

#squares li.redcolor:hover{
 background:red;
}
#squares li.greencolor:hover{
 background:green;
}
#squares li.bluecolor:hover{
 background:blue;
}

うまくいけば、100個の要素の大量のcssコードを参照することについて私が話していたことを理解できます。

そして、はい、私はそのような解決策に行くことができることを理解しています：

var colorsMap={'redcolor':'red','greencolor':'green'};     
$('#squares li').on('hover',function(e){

    $(this).css('background-color', colorsMap[$(this).attr('class')];

});

しかし、これは私にとってエレガントな解決策とは思えません。私は、jsによるインラインcssの変更ではなく、cssを介してそれを実現する方法を見つけようとしています。

4

2 に答える 2

1

CSSを使用してそれを実現することをお勧めしますが、インラインスタイルよりも優れた解決策があります。

var selector = '#squares li'
  , css = []
  , style = document.createElement( 'style' )
  , colorsMap= {
      'redcolor': 'red',
      'greencolor': 'green',
      'bluecolor': 'blue'
    }
$( selector ).each( function() {
  css.push( selector + 
            '.' + 
            // recommand to use data-attr to store color info
            // assuming `className == 'bluecolor'`
            this.className + 
            ':hover' +
            '{' +
            'background:' +
            colorsMap[ this.className ] +
            '}'
            )
})
style.textContent = css.join('')
document.head.appendChild( style )

CSSをに動的に挿入する<head>ことで、通常のCSS、デモのメリットを享受できます。

また、バックエンド側で動的CSSファイルを生成することもできます。構成フォームなどを使用すると、色の管理がより簡単になります。

于 2013-01-31T15:04:44.373 に答える
0

まず、私の英語が苦手です（でも、頑張って学んでいます）だから、はっきりと理解しているとは言えませんが、あなたの言うことで、選択者のことを考えさせてください。あなたなのかわかりませんでした。欲しいですが、それは悪い考えではないと思います。これらのように：など。 彼らの役割は私がそれを言うことはありません。私は学ぶことが不可欠だと思います、彼らは非常に便利です。
$(":header").css("color","#FF00FF");
$("div:contains('test')").css("background","#666600");
$("div:empty").css("background","#888800");
$("div:has(span)").css("background","#008080");

于 2013-01-31T14:24:30.660 に答える