2

私はこのコードの塊を持っています

$('.order_box').each(function(index) {
    box=$(this);
    if(box.find('.order_status').val()=="Payment received") { 
        box.css('color', 'red');
    }
});

これは、多数の div に含まれる選択の値を読み取り、それに応じて各 div に css スタイルを適用することになっています。div html は次のとおりです。

<div class="order_box">
<h1>Order nr.: 2329268704685016576</h1>
<div class="delivery_info">
    --
    <span class="titles">Status:
        <select class="order_status">
            <option class="payment_received" value="Payment received">Payment received</option>
            <option class="need_refund" value="Need to refund money">Need to refund money</option>
            <option class="waiting_stock" value="Waiting for product/s stock">Waiting for product/s stock</option>
            <option class="packing" value="Packing">Packing</option>
            <option class="delivered" value="Delivered/Done" selected="selected">Delivered/Done</option>
        </select>
    </span>
    --
</div>

each 関数を間違った方法で適用している可能性があると思いますが、もちろん理由はわかりません。このような状況に陥ったのは初めてではないので、自分の使い方のどこが悪いのかを知りたいと思っています。

4

4 に答える 4

1

少し単純化して次のことができます。

$('.order_box').addClass(function(){
    return $(this).find('.order_status').val().trim().toLowerCase() == 'payment received' ? 'classNameIfMatch' : '';
});

trim()値から先頭/末尾の空白を削除し、toLowerCase()(HTML または jQuery の) 大文字化エラーが問題を引き起こすのを防ぐために使用します。

JS フィドルのデモ。

興味深いことに、このアプローチは受け入れられた回答よりもいくらか高速/効率的です: JS Perf comparison of approachs、ただし、受け入れられた回答のコードを修正して、どちらの場合も同じ CSS プロパティが設定されるようにしたことに注意してください。

参考文献:

于 2013-02-13T10:58:33.013 に答える
1 
    $('.order_box').each(function(index) {
        var box = $(this);
        if($('.order_status :selected', this).val() == "Payment received") {
           box.css('color', 'red');
        }
    })

編集: JSFiddle の例。

于 2013-02-13T10:51:13.803 に答える
1

これで、クラス .order_box を持つすべての要素をループしています。.order_status の値を確認したいと思いますか？

if($('.order_status').val() == 'Payment received') {
    $('.order_box').css('color', 'red');
}

結果ごとに異なるルールが必要な場合は、スイッチでラップできます。

switch($('order_status').val()) {
    case 'Payment received':
         $('.order_box').css('color', 'red');
         break;

    case 'Need to refund money':
         $('.order_box').css('color', 'green');
         break;

    // etc etc
}

ここで $.each を使用する理由がわかりません。

于 2013-02-13T10:55:11.377 に答える