Javascript jQuery代码的更干净的替代方案

你们知道更好的方法来显示这段代码吗

$(document).ready(function() {
    $("input[type='text']").focus(function() {
        $(this).css({ "background-color" : "#f1f1f1" });
    });
    $("input[type='text']").focusout(function() {
        $(this).css({ "background-color" : "white" });
    });
    $("input[type='email']").focus(function() {
        $(this).css({ "background-color" : "#f1f1f1" });
    });
    $("input[type='email']").focusout(function() {
        $(this).css({ "background-color" : "white" });
    });
    $("input[type='password']").focus(function() {
        $(this).css({ "background-color" : "#f1f1f1" });
    });
    $("input[type='password']").focusout(function() {
        $(this).css({ "background-color" : "white" });
    });
});

我可以把上面的代码缩短成一个更小的函数吗

试试看：

$(document).ready(function() {
    $("input[type='text'],input[type='email'],input[type='password']").focus(function() {
        $(this).css({"background-color" : "#f1f1f1"});
    });
    $("input[type='text'],input[type='email'],input[type='password']").focusout(function() {
        $(this).css({"background-color" : "white"});
    });

});

CSS

.grey {
    background-color: #f1f1f1;
}

jQuery

jQuery(function($) {
    var $inputs = $('input[type=email], input[type=text], input[type=password]');
    $inputs.on('focus', function() {
        $(this).addClass('grey');
    });
    $inputs.on('blur', function() {
        $(this).removeClass('grey');
    });
});

---

这里不需要JavaScript，因为这可以通过CSS单独实现：

输入{
背景色：#FFF；
}
输入[类型=密码]：焦点，
输入[类型=文本]：焦点，
输入[类型=电子邮件]：焦点{
背景色：#f1f1；
}

捷径是

$(function(

要减少指定选择器的次数（并减少键入错误的风险），可以将事件作为数组传递：

$(function() {
  $("input[type='text'],input[type='email'],input[type='password']")
    .on({
       focus: function() { $(this).css({"background-color" : "#f1f1f1"},
       focusout: function() { $(this).css({"background-color" : "white"}
    );
});

或者，您可以链接语句（我的偏好）：

---

建议您在css类中使用

.addClass

/

.removeClass

，因为它可以让您更轻松地更改样式（例如，如果您想在输入周围添加发光框）。

要在css中回答您的问题，您可以这样做

input[type='text'], input[type='email'], input[type='password'] {
    background-color : white;
}
input[type='text']:focus, input[type='email']:focus, input[type='password']:focus {
    background-color : #f1f1f1;
}

注意： CSS不使用进程，但javascript使用。只要可能，最好使用CSS

---

希望这有帮助。

为什么不使用css？你不需要javascript。没有想到我已经添加了一个答案来实现这一点与CSS，可能会帮助你。谢谢，不知道为什么我不只是尝试这个自己。干杯

$(function() {
  $("input[type='text'],input[type='email'],input[type='password']")
    .on("focus", function() { $(this).css({"background-color" : "#f1f1f1"})
    .on("focusout", function() { $(this).css({"background-color" : "white"});
});

input[type='text'], input[type='email'], input[type='password'] {
    background-color : white;
}
input[type='text']:focus, input[type='email']:focus, input[type='password']:focus {
    background-color : #f1f1f1;
}