Question

我有这段代码

$('.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>

我假设我可能以错误的方式应用每个功能，但当然我无法理解。我希望得到我的用法有什么问题，因为这不是我第一次发现自己处于这种状况。

Answer 1

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

修改：JSFiddle示例。

Answer 2

现在，您使用类.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。

Answer 3

您可以简化一点：

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

使用trim()从值中删除任何前导/尾随空格，以及toLowerCase()以防止大写错误（在HTML或jQuery中）导致问题。

JS Fiddle demo

有趣的是，这种方法比接受的答案更快/更有效：JS Perf comparison of approaches，但请注意我选择修改已接受答案的代码，以便在两种情况下都使用相同的CSS属性集。

参考文献：

Answer 4

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

正确使用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/

读取每个div内元素的值

4 个答案: