1

ページで ~~120 回使用されるクラスがあります。そのクラスに影響を与える他のものが特定の基準を満たしている場合にのみ、 margin-bottomを変更したいと思います。以下のコードの問題は、基準を満たすクラスだけでなく、そのクラスに関連付けられているすべてを変更することです。

if (actualCharacters > charactersCanFitInContainer) {
  $("#Full .t16").each(function () {
    $(this).css('margin-bottom', '1.25em');
  });

  $("#Full .t8").each(function () {
    $(this).css('margin-bottom', '4.4175em');
  });
}
4

2 に答える 2

3

あなたの問題を解決したいのですが、前提が間違っています。jQuery でこれを行うべきではありません。CSS に問題がある可能性があり、CSS を使用して解決することをお勧めします。

そうは言っても、コードの問題のいくつかを見てみましょう。

(1) $( セレクター ).each() を使用しないでください

jQuery を呼び出すとき

$( selector );

この小さな男は、セレクターの css に一致するすべての要素の配列を返します。

.each()200 の要素、または 1000 の要素があるかもしれませんが、個々の要素を独自の方法で明示的に変更する傾向がない限り、呼び出しを行うことは決してありません。

$( selector ).each()一致したセレクターの配列に対して for ループを実行します。これにより、一致したセットが大きすぎる場合にパフォーマンスの問題が発生します。

一致したすべての要素を変更するには、これを行うだけで済みます。

$( selector ).css('margin-bottom', '1.25em');

.each() についてもっと読む

(2) CSS の仕事をするために Javascript (または jQuery) を使用しないでください。

あなたの質問から、間隔に問題があるようです。CSS には、、、などのルールを使用してこれを解決する 方法がいくつか あり ます。スクリプトに頼る前に検討する必要があります。overflowwhite-spacetext-overflow

(3) .css() の使用を避ける

$( selector ).css()特に大規模なセットでは、パフォーマンスの問題も発生するため、関数の使用は避ける必要があります。代わりに、セットに適用して使用できるクラスを作成する必要があります。

$( selector ).toggleClass( 'myclass' );
//or 
$( selector ).addClass( 'myclass' ); //and 
$( selector ).removeClass( 'myclass' );

これらの関数はよりパフォーマンスが高いためです。

さらに一歩進めるには、一致する要素のすべてのセットにクラスを適用するのではなく、クラスを親要素に追加し、子が更新された親クラスからスタイルを継承できるようにします。

toggleClass()の詳細を読む

(5) 慣習を守る

CSS ルールの名前に大文字を使用してもまったく問題ありませんが、標準的な慣行ではないため、大文字を使用しないようにする必要があります。標準的なプラクティスを持つことの要点は、誰もがコードを見て、何が起こっているかを正確に知ることができるようにすることです。これにより、コードのデバッグと共有が容易になります。

(6) 過度に設計されたソリューションで悪い設計を補おうとしないでください

また、スタイルをスクリプト化することが唯一の解決策である場合は、要件を変更する必要がある場合があることも考慮してください。

プロジェクト マネージャーが達成したいことが技術的に実現不可能な状況に遭遇したことがあります。限られた領域に大量のテキストを表示したい場合は、スクロールバーなどを許可するか、テキスト ブロックの標準サイズ制限を維持することを検討する必要があります。

このプロジェクトの利害関係者に戻って、彼らがやりたいことは合理的ではないことを伝え、このウィジェットをより良く設計するために一緒に決定を下してください。

開発者として、不合理な要件を許すべきではありません。悪い設計を解決するための厄介な方法を思いつくのではなく、単純に再設計する必要があるものもあります。

結論

問題に関しては、発生しているスペーシングの問題 (オーバーフロー、テキストオーバーフローなど) に具体的に対処する CSS ルールを試してみてください。これを行うためのより良い方法を見つけるには、スタイルをより深く調べる必要があるかもしれません。

于 2013-02-07T19:47:46.123 に答える
0

誰かがこの質問と回答に出くわした場合に備えて、私がやったことを投稿したいと思いました-私をまっすぐにしてくれたQodeninjaに特に感謝します.

JavaScript を使用して CSS を変更するのではなく、単純な @media クエリを使用して、以下のさまざまなフォントとスペースの変更を処理しました。レスポンシブ デザインを行うには、さまざまな方法があります。これは私の要件に最適でした

@media all and (max-width: 1500px) 
{
    body
    {
        font-size:1.1em;
    }
    #Full
    {
        width:1200px; 
        background-color:Blue;
    }
    .theTeams
    {
        width:8.925em;
        padding-left:.238em;
        padding-right:.238em; 
    }
    .t8{margin-bottom:4.75em;}
    .t4{margin-bottom:11.75em;}
    .t2{margin-bottom:26.5em;}
    .tend{margin-bottom:0em;}
    .rtR{margin-left:19em;}

@media all and (max-width: 1200px) 
{
    body
    {
        font-size:0.9em;
    }
    #Full
    {
        width:900px; 
        background-color:Orange;
    }
    .theTeams
    {
        width:7.75em;
        padding-left:.14em;
        padding-right:.14em;
        height:2.1em;   
    } 
    .t8{margin-bottom:4.95em;}
    .t4{margin-bottom:12.25em;}
    .t2{margin-bottom:27.75em;}
    .tend{margin-bottom:0em;}
    .rtL{margin-left:16em;}     
}
于 2013-04-17T15:12:09.590 に答える