在多个(html）元素上循环执行相同的JavaScript函数属性更改

Looping through same JavaScript function on multiple (html)elements property change

本文关键字：JavaScript 函数 属性 执行 循环 html 元素      更新时间：2023-09-26

是否有方法为多个字段循环JavaScript函数？

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

text1
text2
text3
text4
text5

现在，它们中的每一个都在"focusout"上做相同的事情，因此我不想为它们中的每个编写五个不同的JS函数：

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

如何避免在这里编写五个不同的函数？

提前感谢

使用一个公共类：

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

和这个JS:

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

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

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

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

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

如果在所有元素上放同一个类没有意义，可以用逗号组合选择器：

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

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

var onFocusOut = function() {
 do something
};
$('#text1').focusout(onFocusOut);
$('#text2').focusout(onFocusOut);
$('#text3').focusout(onFocusOut);
$('#text4').focusout(onFocusOut);
$('#text5').focusout(onFocusOut);

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

试试这个：

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

这是一个很短的方法…

$("#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 () {...});

更新增加了两个选项来选择您的字段

相关文章：