更改標簽值后如何更改標簽的背景色

Question

我想在更改標簽值時更改其背景顏色。 我的代碼無法正常工作。 我該怎么做？

HTML：

<label class="label-default lb_status label-danger"> confirmed </label>

JavaScript：

$(function () {
        var status=$('.lb_status').val();
        if (status == "confirmed") {
            $('.lb_status').removeClass('label-default').addClass('label-success');
        }
        else if (status == "pending") {
            $('.lb_status').removeClass('label-default').addClass('label-warning');

        }
        else if (status == "declined") {
            $('.lb_status').removeClass('label-default').addClass('label-danger');

}

Answer 1

我認為您的函數僅在啟動時調用。 您需要的是一個jQuery更改處理程序： https : //api.jquery.com/change/

這是一個工作示例，但請注意change（）僅適用於輸入元素： https : //jsfiddle.net/g99013r9/

$(".lb_status").change(function() {        
    var status=$('.lb_status').val();
    console.log(status);
    if (status == "confirmed") {
        $('.lb_status').removeClass('label-default').addClass('label-success');
    }
    else if (status == "pending") {
        $('.lb_status').removeClass('label-default').addClass('label-warning');

    }
    else if (status == "declined") {
        $('.lb_status').removeClass('label-default').addClass('label-danger');
    }
});

希望這可以幫助！

Answer 2

這是工作示例http://jsfiddle.net/L3xz0s97/

<label class="label-default lb_status label-danger">confirmed</label>
<script>
    $(function () {
    var status=$('.lb_status').text();
    if (status == "confirmed") {
        $('.lb_status').removeClass('label-default').addClass('label-success');
    }
    else if (status == "pending") {
        $('.lb_status').removeClass('label-default').addClass('label-warning');

    }
    else if (status == "declined") {
        $('.lb_status').removeClass('label-default').addClass('label-danger');

    }
    })
</script>

僅在啟動時調用功能。