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

Question

我有一些正在运行的代码，但我有很多重复：http: //jsfiddle.net/6Wp2j/25/

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

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

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

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

Answer 1

您可以定位所有输入，或者只是给它们一个公共类来定位，然后提取一些东西，我使用了这个类，但是如果元素有多个类等，数据属性会更容易：

$('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" >  

JS

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

小提琴

Answer 2

可以使用类名来完成：

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

我希望在data-fruit属性中包含关系/链接，例如：

小提琴

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

类名并不是最适合定义关系的。考虑一下，如果某个设计师得到了您的代码，并开始在其中抛出额外的类进行样式设置，这会破坏代码。

Answer 3

试试下面

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

检查这个JSFiddle

检查@Ian 的小提琴后，我明白了我的错误。如果您将类添加到，input则上述内容将失败，因为它需要整个属性。

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

我更新它小提琴。