jquery - jQuery 减少监听器/事件的数量

Question

下面的代码对我有用，但我需要尽可能地清理和简化它，有人可以帮忙吗？提前致谢

$('#dealTemplateI18nMetaTitle_en_AU').keyup( function() {
   var len = $(this).val().length;
   if (len >= 32) {
     $('#dealTemplateI18nMetaTitle_en_AU').css("background-color", "#ff3b3b").css("font-size", "16px").css("font-weight", "bold").css("color", "#ffffff");
   } else {
     $('#dealTemplateI18nMetaTitle_en_AU').css("background-color", "#82b548").css("font-size", "16px").css("font-weight", "bold").css("color", "#ffffff");
   }
});

Answer 1

如何将样式移动到班级并更改班级。

http://jsfiddle.net/chamikasandamal/LzZMs/

$('#dealTemplateI18nMetaTitle_en_AU').keyup(function () {
    var len = $(this).val().length;
    if (len >= 32) {
        $('#dealTemplateI18nMetaTitle_en_AU').addClass("error");
        $('#dealTemplateI18nMetaTitle_en_AU').removeClass("no-error");
    } else {
        $('#dealTemplateI18nMetaTitle_en_AU').removeClass("error");
        $('#dealTemplateI18nMetaTitle_en_AU').addClass("no-error");
    }
});

CSS，

#dealTemplateI18nMetaTitle_en_AU {
    font-size: 16px;
    font-weight:bold;
    color:#fff;
}
#dealTemplateI18nMetaTitle_en_AU.error {
    background-color:#ff3b3b;
}
#dealTemplateI18nMetaTitle_en_AU.no-error {
    background-color:#82b548;
}

Answer 2

您可以在此处使用类并缓存您的选择器..

var $elem = $('#dealTemplateI18nMetaTitle_en_AU');
$elem.addClass('large');
$elem.keyup(function () {
    (this.value.length) >= 32 ? $elem.addClass('error') 
                              : $elem.removeClas('error');
});

.large {
    font-size: 16px;
    font-weight: bold;
    color:#ffffff;
    background-color: #82b548;
}
.error {
    background-color:#ff3b3b;
}

Answer 3

我认为您不能删除任何侦听器或事件（您只有一个，如果您正在监视 keyup 事件，则需要它）。如果我要在不更改标记的情况下对 js 进行更改，我会使用以下内容：http: //jsfiddle.net/mrYGA/

$("#dealTemplateI18nMetaTitle_en_AU").keyup(function() {
    var el = $(this);
    var len = el.val().length;
    var bgcolor = len >= 32 ? "#ff3b3b" : "#82b548";

    el.css({
        "font-size": "16px",
        "font-weight": "bold",
        "color": "#ffffff",
        "background-color": bgcolor
    });
});