4

我有几个要应用自定义 jquery 函数的文本框：

jQuery.fn.setReadOnly = function () {
    var o = $(this[0]);
    o.prop('readonly', true)
    .css('background-color', '#F0F0F0');
};

现在我需要做：

$('#txt1').setReadOnly();
$('#txt2').setReadOnly();
$('#txt3').setReadOnly();
$('#txt4').setReadOnly();
$('#txt5').setReadOnly();

我想实现以下目标：

$('#txt1, #txt2, #txt3, #txt4, #txt5').setReadOnly();

谢谢你。

4

5 回答 5

7

在您的情况下，您可以使用this- 它已经是一个匹配每个提供的元素的 jQuery 对象：

jQuery.fn.setReadOnly = function() {
    return this.prop('readonly', true).css('background-color', '#f0f0f0');
}

在更一般的情况下，除了在整个集合上调用 jQuery 函数之外，您希望对每个 DOM 元素显式执行某些操作，您可以这样做：

jQuery.fn.myFunc = function() {
     return this.each(function() {
         ...
     });
});

这在您的特定情况下是不必要的，因为.propand.css调用.each隐式执行。

于 2012-11-26T14:51:18.213 回答
1

您当前正在明确设置$(this[0])，它只访问第一个元素。

你想用o = $(this);

演示

编辑：正如 Alnitak 指出的那样，this它将是一个 jQuery 集合，您可以继续进行this.prop(...)而无需额外的$()包装。

于 2012-11-26T14:50:41.403 回答
1

通常，将其应用于所有匹配元素的语法是这样的：

jQuery.fn.setReadOnly = function () {
    return this.each(function () {
        $(this).prop("readonly", true).css("background-color", "F0F0F0");
    });
};

虽然没有必要使用.eachon 方法this来遍历每个匹配的项目，但如果您曾经扩展此插件以执行更多操作并且需要将事物应用于 jQuery 方法之外的每个元素（prop和css部分） ，这将是正确的使用方法.

于 2012-11-26T14:51:23.543 回答
0

请参阅我的赞成票：使用 this.each - 它更好并且返回对象链接。

您要从中获取第一项的“this”对象 - 只需使用以下命令循环：

for(var i = 0, len = this.length; i<len; i++){
    var o = $(this[i]);
    o.prop('readonly', true)
    .css('background-color', '#F0F0F0');
}

未经测试，但我很确定它有效。

于 2012-11-26T14:52:03.610 回答
0

这就是你写它的方式

不要忘记锁链。

jQuery.fn.setReadOnly = function () {
    // return 'this' for chaining purposes
    return this.prop("readonly", true)
               .css("background-color", "#f0f0f0");
    });
};
于 2012-11-26T14:53:39.490 回答