2

我有这段代码

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

它应该读取包含在一堆 div 中的选择的值，并相应地将 css 样式应用于每个 div。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>

我假设我可能以错误的方式应用每个函数，但我当然不明白为什么。我希望了解我的用法有什么问题，因为这不是我第一次发现自己处于这种情况。

4

4 回答 4

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 中。

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 回答
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 methods，但请注意，我选择修改已接受答案的代码，以便在两种情况下都设置相同的 CSS 属性。

参考：

于 2013-02-13T10:58:33.013 回答
0

由于您的代码仅依赖于 order_status 类，因此不需要 each 函数。

正确使用 jQuery Api http://api.jquery.com/selected-selector/。

$(".order_status").change(function(){
if($(".order_status option:selected").val()=="Payment received") { 
$(this).attr('style','color:red;');
}else{
$(this).attr('style','color:black;');
}
});

检查这里解决的问题：

http://jsfiddle.net/hunkyhari/Q9Zfc/

于 2013-02-13T11:08:01.493 回答