Javascript 将jquery代码应用于多个文本区域

我有一些代码正在工作，但我有很多重复：

---

我想知道是否有一种方法可以将项目放入某种数组中，这样我就可以将相同的代码应用于几个不同的字段。

您可以将所有输入作为目标，或者只给它们一个公共类作为目标，然后提取一些内容。我使用了类，但如果元素有多个类，则数据属性会更容易：

$('input').on('keyup', function() {
    $('.'+this.className).html(this.value);
});

编辑：

如上所述，如果元素有多个类，请使用数据属性：

<input class="input" data-id="apple" >
<input class="input" data-id="orange" >
<input class="input" data-id="banana" >  

---

可以使用类名完成：

$('input').on('keyup', function() {
    $("div." + $(this).attr('class')).html(this.value);
});

我更喜欢在

数据结果

属性中使用关系/链接，例如：

类名实际上并不最适合定义关系。考虑一下，如果某个设计器被赋予了代码，并开始在样式中抛出额外的类，这将破坏代码。

尝试在

下面。

$('input').on('keyup', function () {
    var clas = $(this).prop('class');
    $("div." + clas).html(this.value);
});

检查这个

在检查了@Ian的小提琴之后，我明白了我的错误。如果您将类添加到

输入中

，则上述操作将失败，因为它占用了整个属性

正如adeneo所建议的，尝试使用HTML5数据属性

---

我正在更新它。

您似乎正在寻找一个新的属性。为什么不给他们第二个公共类？如何：-针对一个公共类，然后获取新的

数据结果
属性Iadded@Ian+1这是更好的方法问题是，如果
输入
比
香蕉
@herb有更多的类怎么办？通过阅读答案：
但是如果元素有多个类等，数据属性会更容易。这只是一个例子example@user1671639它只是元素上的一个属性（有效属性），您可以使用它来存储数据/信息。该代码随后在事件处理程序中检索它，并使用它查找目标输出元素。它有效地将div的类存储在文本应该位于的位置outputted@user1671639-那些是@user1671639这是一种创建自定义数据属性的方法，如
数据yourDataName
@Ian yes，添加了一个使用
数据结果而不是类的版本。@Ian感谢您的帮助。找到差异并得到使用
数据
属性的原因。
$('input').on('keyup', function() {
    $("div." + $(this).attr('class')).html(this.value);
});

$('input').on('keyup', function() {
    $("div[data-fruit=" + $(this).data('fruit') + "]").html(this.value);
});

$('input').on('keyup', function () {
    var clas = $(this).prop('class');
    $("div." + clas).html(this.value);
});