Question

有没有办法为多个字段循环JavaScript函数？

例如我有5个文本框，例如：

text1
text2
text3
text4
text5

现在，他们每个人都在“聚焦”上做同样的事情，因此我不想为每个人编写五个不同的JS函数：

$('#text1').focusout( {
.............
    });

$('#text2').focusout( {
.............
    });

$('#text3').focusout( {
.............
    });

$('#text4').focusout( {
.............
    });

$('#text5').focusout( {
.............
    });

如何避免在此处编写五种不同的功能？

提前致谢

Answer 1

使用公共类：

<input type="text" class="focusClass" />
<input type="text" class="focusClass" />

和这个JS：

$('.focusClass').focusout(function() {
    // ...
});

其他选择是将它们连接在一起，但这种方式更难维护：

$('#text1, #text2, #text3, #text4, #text5 ').focusout(function() {
    // ...
});

Answer 2

在您的选择器中，选择您要使用的所有元素：

$('#text1, #text2, #text3, #text4, #text5')

Answer 3

如果在所有元素上放置相同的类没有意义，可以将选择器与逗号组合：

$('#text1, #text2, etc...., #text5').focusout( {
.............
});

或者，您可以声明该函数，然后通过焦点调用将其作为参数传递给每个选择器：

var onFocusOut = function() {
 do something
};

$('#text1').focusout(onFocusOut);
$('#text2').focusout(onFocusOut);
$('#text3').focusout(onFocusOut);
$('#text4').focusout(onFocusOut);
$('#text5').focusout(onFocusOut);

Answer 4

这是一个简短的方法......

$("#text" + [1,2,3,4,5].join(", #text")).focusout(function () {...});

但我想知道你是否不能在元素中添加一个类，这样你就可以一次选择它们。

例如......

<input type='text' id="text1' class='textfield' />
<input type='text' id="text2' class='textfield' />
<input type='text' id="text3' class='textfield' />

然后使用以下选择器...

$(".textfield").focusout(function () {...});

其他选项是您有一个带有id的父容器，它为您提供以下选项...

<div id="formfields">
    <input type='text' id="text1' class='textfield' />
    <input type='text' id="text2' class='textfield' />
    <input type='text' id="text3' class='textfield' />
</div>

然后选择器看起来像这样......

$("#formfields input[type=text]").focusout(function () {...});

更新添加了两个选项来选择字段

Answer 5

您可以将文本框的ID传递给jQuery函数来执行您的任务..

试试这个：

function myFunction(IDofObject)
{
    $( "#"  + IDofObject  ).doSomething();
}

在多个（html）元素属性更改上通过相同的JavaScript函数循环

5 个答案: