Question

我可以使用each迭代一组匹配的选择器，并应用一些功能，例如在输入中显示提示文本。

$('.default-value').each(function () {
    var $t = $(this),
    default_value = this.value;
    $t.css('color', '#929292');
    $t.focus(function () {
        if (this.value == default_value) {
            this.value = '';
            $t.css('color', 'black');
        }
    });
    $t.blur(function () {
        if ($.trim(this.value) == '') {
            $t.css('color', '#929292');
            this.value = default_value;
        }
    });
});

相反，我希望编写一些JavaScript，它接受一个数组，创建一些输入，并将相同的功能应用于它。例如，在下面的脚本中，我需要将功能添加到新创建的input元素中，而不是使用each来迭代它们。如何实现这一目标？

jQuery.fn.extend({
    dialog_prompt: function(obj) {

        var dialog=$('div')
        .append($('input',{type: 'hidden',autofocus: 'autofocus'}));

        var arrayLength = obj.elements.length;
        for (var i = 0; i < arrayLength; i++) {
            var input=$('input',obj.elements[i].update?{'class': 'update-value'}:{});
             //How do I add the .default-value script to this element?
            dialog.append(input);
        }
        //Other script goes here...
        return this.each(function () {
            $(this).dialog(obj);
        });
    }
});

修改

会出现以下情况吗？我在哪里保存default_value？

var input=$('input',obj.elements[i].update?{'class': 'update-value'}:{})
.css('color', '#929292')
.focus(function () {
    if (this.value == default_value) { //Where is default_value now applied
        this.value = '';
        $t.css('color', 'black');
    }
})
.blur(function () {
    if ($.trim(this.value) == '') {
        $t.css('color', '#929292');
        this.value = default_value; //Where is default_value now applied
    }
})

Answer 1

根据您的评论，您似乎在询问如何处理.each()回调中的变量。如果在var回调函数中声明一个带有.each()的变量，它将仅在该特定回调的生命周期内存在，并且每次调用回调函数时都会创建一个新变量。它只是函数中的正常局部变量。每次调用函数时都会创建和销毁它：

xxx.each(function() {
    var temporaryVariable;    // survives only for the duration of the function call
});

如果您希望变量在所有.each()回调调用中持续，则在更高的范围内声明它，使其在所有回调调用中都存在。

var longerPeristingVariable = [];
xxx.each(function() {
    longerPersistingVariable.push("whatever");
});
console.log(longerPeristingVariable);

Answer 2

绑定和使用默认值的数据元素的示例 http://jsfiddle.net/yt92sL2f/

更新版本将颜色抽象为css类，并且如果用户实际输入的默认值导致颜色不再返回浅灰色，则还会修复逻辑错误。
http://jsfiddle.net/yt92sL2f/11/

var $inputs = $('.default-value');

$inputs
    .on('focus', function() {
        var $this = $(this);

        if ($this.val() === $this.data('default')) {
            $this.val('');
            $this.removeClass('default');
        }
    })
    .on('blur', function() {
        var $this = $(this);

        if ($this.val().length < 1) {
            $this.val($this.data('default'));
        }

        if ($this.val() === $this.data('default')) {
            $this.addClass('default');
        }
    });

Answer 3

你可以使用jquery＆＃34; on＆＃34;将事件应用于对话框中的所有输入的方法。一个例子是：

$('#dialog').on('click', 'input', function () { alert("testing"); });

您可以在此处找到文档：http://api.jquery.com/on/

Answer 4

对于此

var input=$('input',obj.elements[i].update?{'class': 'update-value'}:{});
             //How do I add the .default-value script to this element?

试试这个

var input = $('<input/>')
                 .addClass(obj.elements[i].update ? 'update-value':'')
                 .val(/*yer value here*/)
                 .appendTo(dialog);

将函数应用于单个新创建的元素

4 个答案: