javascript - 为什么 jQuery 选择器变量不能在命名空间中工作？

Question

我很困惑为什么这不起作用。我希望声明一个以上的变量。我究竟做错了什么？

     var message = (function ($) {
        var $modalBody = $('.modal-body'),
            $lblToUser = $modalBody.find('.to-user');
        return {
            toUser: function () {
                $lblToUser.val('To');
                $lblToUser.focus(function () {
                    if (this.value === 'To') this.value = '';
                    $(this).addClass('darker');
                }).blur(function () {
                    if (this.value === '') this.value = 'To';
                    $(this).removeClass('darker');
                });
            },
        };
    })(jQuery);

message.toUser();

Answer 1

也许您需要先初始化文档？

$( document ).ready( function () {       // <-------
     var message = (function ($) {
        var $modalBody = $('.modal-body'),
            $lblToUser = $modalBody.find('.to-user');
        return {
            toUser: function () {
                $lblToUser.val('To');
                $lblToUser.focus(function () {
                    if (this.value === 'To') this.value = '';
                    $(this).addClass('darker');
                }).blur(function () {
                    if (this.value === '') this.value = 'To';
                    $(this).removeClass('darker');
                });
            },
        };
    })(jQuery);

    message.toUser();
});

Answer 2

看来您,最后放错了位置，toUser这可能会导致问题。

 var message = (function ($) {
    var $modalBody = $('.modal-body'),
        $lblToUser = $modalBody.find('.to-user');
    return {
        toUser: function () {
            $lblToUser.val('To');
            $lblToUser.focus(function () {
                if (this.value === 'To') this.value = '';
                $(this).addClass('darker');
            }).blur(function () {
                if (this.value === '') this.value = 'To';
                $(this).removeClass('darker');
            });
        }, // <-----
    };
})(jQuery);

message.toUser();