Question

我正在跟踪输入更改，如下所示：

$(document).ready(function() {
    $('input').change(function () {
        alert("Key pressed");
    });
    $('textarea').change(function () {
        alert("Key pressed");
    });
    $('input:radio').change(function() {
       alert("Key pressed");
    });
    $('input:checkbox').change(function() {
       alert("Key pressed");
    });
 });

是否可以重新考虑上述代码，以便我不需要单独调用每个元素？

Answer 1

jQuery使用Sizzle选择器引擎，该引擎遵循与CSS相同的规则。考虑到这一点，您可以使用,分隔选择器。试试这个：

$('input, textarea').change(function() {
   alert("Key pressed");
});

或者，您可以将公共类应用于所有这些元素，然后选择它。

请注意，无论如何选择:radio元素时，您的:checkbox和input选择器都是多余的。另请注意，在元素值更改并且失去焦点之前，change事件不会触发。如果您想在按键发生时实际触发事件，请根据您的具体要求使用keypress或keydown。

Answer 2

要捕获所有输入的keypress事件，您不必提及:checkbox和:radio，因为它们包含在input中：

$('input, textarea').on('change', function () {
    alert("Key pressed");
});

您甚至可以使用keypress / keyup / keydown个事件代替change。

选择所有指定选择器的组合结果。您可以指定任意数量的选择器组合成单个结果。这种多表达式组合子是选择不同元素的有效方法。返回的jQuery对象中DOM元素的顺序可能不相同，因为它们将按文档顺序排列。该组合器的替代方法是.add（）方法。

文档：https://api.jquery.com/multiple-selector/

Answer 3

使用多选择器重构代码:input它选择所有输入元素

$(':input').on('change', function () {
    alert("Key pressed");
});

如何有效地使用输入类型的更改功能

3 个答案: