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);
});

FIDDLE

修改

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

<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); });

FIDDLE

Answer 2

可以使用班级名称来完成：

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

我更希望在data-fruit属性中使用关系/链接，例如：

Fiddle

$('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数据属性。

我要更新它fiddle。

将jquery代码应用于多个textareas

3 个答案: