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

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

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 2

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

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 3

我认为你不能删除任何听众或事件（如果你正在观看键盘事件，你只能拥有一个和你需要的那个）。如果我要在不改变标记的情况下对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
    });
});

jQuery减少了侦听器/事件的数量

3 个答案: