custom jquery plugin, link each element with own data
<p>I'm working on a jQuery plugin for hints inside textboxes. So far, I have it working fine. However, I need to implement a 'remove all' method for the textboxes that have the original hint. </p>

<p>The only way I can think of doing this is looping and comparing the value with the title:</p>

<pre><code>$('input').each(function() {
  if ($(this).prop('title') == $(this).val()) {
    $(this).val('');
  }
});
</code></pre>

<p>The problem with this, though, is that I'm giving the ability to set the hint based on the title OR overriding it in the options. So..I don't want to rely on the title.</p>

<p><strong>Question</strong>: Is there a built in jQuery mechanism to link an element with specific data, or is there another solution?</p>

<p>Here's my current code:</p>

<pre><code>(function ($) {
    var settings = {
        normColor: '#000000',
        hintColor: '#808080',
        hint: ''
    };

    var methods = {
        init: function (options) {
            var $this = $(this);

            // try to set original text color of input
            settings.normColor = $this.css('color');

            // set hint to the title
            settings.hint = $this.prop('title'); 

            // merge default settings with user provided options
            // we need to supply a blank array as the first
            // argument so the default settings are not overwritten
            settings = $.extend({}, settings, options);

            return this.each(function () {
                $this.css('color', settings.hintColor);
                $this.val(settings.hint);

                // begin on focus
                $this.on('focus', function () {
                    if ($this.val() == settings.hint) { // if what's entered is NOT the hint
                        $this.val('');

                        // return to normal color
                        $this.css('color', settings.normColor);
                    }
                }); // end on focus

                // begin on blur
                $this.on('blur', function () {
                    if ($this.val().length == 0 || $this.val() == msg) {
                        $this.val(settings.hint);
                        $this.css('color', settings.hintColor);
                    }
                }); // end on blur
            });
        },
        remove: function () {
            return this.each(function () {
                alert('remove');
            });
        },
        removeAll: function() {
            return this.each(function () {
                alert('remove all');
            });
        }
    };

    /// begin main function
    $.fn.hint = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.hint');
        }
    };
})(jQuery);
</code></pre>
