4

Webサービスによって自動的に生成されるスタイル設定が必要なHTMLコードがいくつかあります。私が与えられたコードの一部は次のようになります：

<input type='text' id='txtField001' class='txtField150'>foo</input>    
<input type='text' id='txtField002' class='txtField10'>bar</input>
<input type='text' id='txtField001' class='txtField142'>sum</input>

さて、ここに「奇妙な」部分があります。クラス名に続く数字（つまり、150、10、142）は、実際には最大です。テキストフィールドが受け入れる文字数。テキストフィールドがレンダリングする幅についての「ヒント」が表示されます。幅は150の場合は幅が広く、10の場合は短くなります。この数は大きく異なるため（Webサービスを呼び出す人によって定義されるユーザー）、すべての可能な値に準拠するために「n」クラスを持つことは実用的ではありません。

つまり、「遠隔クラス」などを作成する方法はありますか。理論的には、Webサービスが提供するものを変更することはできず、JavaScriptで物事を評価したくないということを念頭に置いてください。

具体的には、このようなものを宣言する方法はありますか（私はそれがややワイルドであることを知っています）：

.txtField1 ... .txtField50 {
    width: 50px;
}

.txtField50 ... .txtField100 {
    width: 80px;
}

.txtField100 ... .txtField150 {
    width: 120px;
}

（私がこれをどのように読んでいるか：「1から50の範囲のクラスtxtFieldには、50pxの幅を使用してください...など）

助けてくれてありがとう。私はそれがロングショットであることを知っています、そして私の最善の選択肢はjavascriptを使用することです、しかしねえ、私は尋ねなければなりませんでした;-)

4

3 に答える 3

6

はい、制限あり

私はcimmanonに似た解決策を考えていましたが、それよりもはるかに洗練されている必要があることを知っていました（そのため、答えるのに時間がかかりました）。

これにはおそらく実用的な制限が必要であることを前もって述べておきます（あなたの状況で使用できる文字数に制限があるかどうかはわかりません）。私の例のフィドルでわかるように、 300以上のものはすべて大きなサイズに解決できません。上限または不明な上限がある場合は、javascriptが本当に最善の解決策になります。私の例は300未満で機能し、おそらく999まではそれほど多くのコードで作成できませんでした。しかし、1000以上は無理だと思います。

CSS

/* set default as small size */
[class ^= "txtField"] {
    width: 50px;
}

/* weed out 50-99, making sure not to get 5-9 */
[class *= "d5"]:not([class $= "d5"]),
[class *= "d6"]:not([class $= "d6"]),
[class *= "d7"]:not([class $= "d7"]),
[class *= "d8"]:not([class $= "d8"]),
[class *= "d9"]:not([class $= "d9"])
{
    width: 80px;
}

/* weed out 100-199, making sure not to get 1 or 10-19
   NOTE: this becomes a highly specific selector
*/
[class *= "d1"]:not([class $= "d1"]):not([class $= "d10"]):not([class $= "d11"]):not([class $= "d12"]):not([class $= "d13"]):not([class $= "d14"]):not([class $= "d15"]):not([class $= "d16"]):not([class $= "d17"]):not([class $= "d18"]):not([class $= "d19"])
{
    width: 120px;
}

/* weed out 150-199, making sure not to get 15-19
   NOTE: because the previous selector is so specific, this one
   needed the !important flag (which I hate to use, but here
   seemed to be the best and only solution)
*/
[class *= "d15"]:not([class $= "d15"]),
[class *= "d16"]:not([class $= "d16"]),
[class *= "d17"]:not([class $= "d17"]),
[class *= "d18"]:not([class $= "d18"]),
[class *= "d19"]:not([class $= "d19"])
{
    width: 150px !important;
}

/* weed out 200-299, making sure not to get 2 or 20-29
   NOTE: again high specificity
*/
[class *= "d2"]:not([class $= "d2"]):not([class $= "d20"]):not([class $= "d21"]):not([class $= "d22"]):not([class $= "d23"]):not([class $= "d24"]):not([class $= "d25"]):not([class $= "d26"]):not([class $= "d27"]):not([class $= "d28"]):not([class $= "d29"])
{
    width: 180px;
}

/* weed out 250-299, making sure not to get 25-29
   NOTE: !important needed again;
   also, anything 300+ reverts back to smallest size unless
   one keeps going... maybe 999 could be reached "reasonably"
*/
[class *= "d25"]:not([class $= "d25"]),
[class *= "d26"]:not([class $= "d26"]),
[class *= "d27"]:not([class $= "d27"]),
[class *= "d28"]:not([class $= "d28"]),
[class *= "d29"]:not([class $= "d29"])
{
    width: 210px !important;
}
于 2012-11-23T15:55:09.933 に答える
3

クラスを変更できない場合は、CSS属性セレクターを使用して部分一致を実行できます。

input[class^="txtField10"] /* catch txtField10, txtField100, txtField1000, etc */
input[class^="txtField150"] /* catch txtField150, txtField15064, txtField150829, etc */

この例では「beginswith」構文を選択しました。他のタイプはここで確認できます：http： //css-tricks.com/attribute-selectors/

フィールドの最大長は、実際にはmaxlength属性を介して設定する必要があります（これは、上記で行ったように一致させることもできます）。しかし、それが自動生成された場合、あなたができることはあまりありません。

于 2012-11-22T02:42:37.930 に答える
0

もう1つの方法は、オブジェクトに複数のクラスを設定することです。

<input type='text' id='txtField001' class='txtField width150'>foo</input>

または、絶対的な実装に縛られていないもの（これは、標準のフィールド幅として狭い、広いなどを使用している社内の開発フレームワークで行っていることです）：

<input type='text' id='txtField001' class='txtField wide'>foo</input>

そうすれば、実装の詳細を調整する場合、すべてのクラスを調整する必要を感じることはありません。

この方法は、スクリプト手法、生成されたCSSファイル、またはその他の多くの効率性や一貫性のメカニズムと非常によく組み合わされています。

前の回答の例に従って、Dojoを使用すると、私はjQueryの担当者ではないため、次のようなフォーマットを行うことができます。

var widths = {
   narrow:  '10em';
   wide: '30em';
}

for (m : widths) {
   if widths.hasOwnProperty(m) {
      dojo.query('.' + m).style('width', widths[m]));
   } 
}

さまざまなスタイルで特定の幅を絶対にエンコードする必要がある場合でも、スクリプト用のノードを選択するための単一の追加クラスがあると役立ちます。共有クラスに基づいて選択し、パラメータを持つクラスのすべてのクラスをチェックします。

厳密な検証コンプライアンスに準拠していない場合は、この情報をクラスではなくカスタム属性に埋め込んでから、JavaScriptで解析することもできます。

多くのアプローチがあります。

于 2012-11-22T01:38:36.003 に答える