0

スパンの値に基づいてフォントサイズを変更する必要があります

クラス名の数字は必ずしも同じではありません

問題: text() ですべての値を取得します (50020)

each() と $this をどこかで使用する必要があります。どのように？

ありがとう

<span class="emo_vote-1">50</span>
<p>smth.</p>
<span class="emo_vote-2">0</span>
<p>smth.</p>
<span class="emo_vote-3">20</span>

jQuery

var voteNumberSpan = jQuery("span[class^=\"emo_vote\"]");
    var voteNumber = voteNumberSpan.text();
    //console.log(voteNumber);
    if (voteNumber <= 30) {
        voteNumberSpan.css("fontSize","10px")
    } else if(voteNumber == 50) {
        voteNumberSpan.css("fontSize","16px")
    } else  {
        voteNumberSpan.css("fontSize","24px")
    }
    //I tried also:
    //voteNumberSpan.each(function (i) {
        //var voteNumber = voteNumberSpan.text();   
        //if (voteNumber < 30) {
        //voteNumberSpan.css("fontSize","10px")
        //} else if(voteNumber == 50) {
        //voteNumberSpan.css("fontSize","16px")
        //} else  {
        //voteNumberSpan.css("fontSize","24px")
        //}
    //});

jsfiddle http://jsfiddle.net/lima_fil/5VTN4/2/

4

4 に答える 4

1

http://jsfiddle.net/5VTN4/7/

    jQuery(document).ready(function(){

    jQuery("span[class^=\"emo_vote\"]").each(function(){
        var voteNumber = $(this).text();
    console.log(voteNumber);
    if (voteNumber <= 30) {
        $(this).css("fontSize","10px")
    } else if(voteNumber == 50) {
        $(this).css("fontSize","16px")
    } else  {
        $(this).css("fontSize","24px")
    }
    });
});
于 2013-08-26T15:30:33.653 に答える
1

このフィドルを試してください: http://jsfiddle.net/5VTN4/5/

each アプローチを使用し、サイズに tekst 値を使用します。

 jQuery(document).ready(function(){
     $("span[class^=\"emo_vote\"]").each(function(){
        alert($(this).text());
        $(this).css("fontSize", $(this).text() + "px")
     });
});
于 2013-08-26T15:30:54.423 に答える
0

3 つの異なるクラス名があるため、何らかの理由で、関連するすべての要素を関連付けるために一般的なクラス名を追加し、それによって選択することをお勧めします( attributespan -starts-with セレクターを使用すると失敗する傾向があるため)で始まるクラス名emo_voteがクラスリストの最初に表示されない場合)、次の jQuery をお勧めします。

jQuery('span.emo-vote').css('font-size', function(){
    var s = parseInt($(this).text(), 10);
    if (s <= 30) {
        return '10px';
    }
    else if (s > 30 && s <= 50) {
        return '16px';
    }
    else {
        return '24px';
    }
});

次の HTML と組み合わせる:

<span class="emo_vote-1 emo-vote">50</span>
<p>smth.</p>
<span class="emo_vote-2 emo-vote">0</span>
<p>smth.</p>
<span class="emo_vote-3 emo-vote">20</span>

JS フィドルのデモ。

each()ちなみに、 ,を使用する必要はありませんcss()(上記で示したように) は、セレクターによって返される各要素を反復処理する無名関数を取ります ($(this)反復が実行されている現在の要素に関連します)。

参考文献:

于 2013-08-26T15:39:56.183 に答える
0

この方法を試してください：

  1. フォント サイズの範囲を定義します: 10px から 24px まで。

  2. 各スパンにレートを設定します。

    <span class="emo_vote-1" data-i2="fontSize:[10,24],key:'k',rate:50" >50</span>
<p>smth.</p>
<span class="emo_vote-2" data-i2="key:'k',rate:0" >0</span>
<p>smth.</p>
<span class="emo_vote-3" data-i2="key:'k',rate:20">20</span>

デモを見る

于 2013-12-15T18:26:26.033 に答える