Jquery захватывает элемент управления, находящийся в том же элементе div другого элемента управления

Question

У меня есть набор div, которые представляют набор полей. Я хотел бы, чтобы по щелчку текстового поля вы могли получить div с классом «подсказка», который находится в том же самом div.

Например, если я нажму "txtUsername", я получу "usernameHint"

Это HTML

        <div class="formfield">
            <label class="desc" id="lblUsername" runat="server">Username</label>
            <input type="text"  id="txtUsername" runat="server" class="field text medium" />
            <div id="usernameHint" class="hint" runat="server"></div>               
            <div id="usernameError" runat="server"></div>   
        </div>

        <div class="formfield">
        <label class="desc" id="lblPassword" runat="server">Password</label>
        <input type="password" id="txtPassword" runat="server" class="field text medium" /> 
        <div id="passwordHint" class="hint" runat="server"></div>    
        <div id="passwordError" runat="server"></div>  
        </div>

Есть идеи?

Answer 1

$('#txtUsername').click(function() {
    $(this).parent().find('.hint').text('Must be between 5 and 12 characters in length');
});

Выбирает родительский элемент текстового поля, который является вашим <div class="formfield">, затем находит элемент с классом подсказка внутри него, что устраняет необходимость в идентификаторе и более сложном способе получения содержимого подсказка дел.

Answer 2

var hints = (function () {
   /**
    * @var Default selector to display hints for
    */
   var defaultSelector = 'input[type=text]',
   /**
    * This object contains all the public methods.
    */
       handlers = {
         /**
          * Apply fn on the hint-element belonging to the context element
          */
          action: function (fn) {
             var hint = $(this).parent().find('.hint');
             if(hint) {
                hint[fn]();
             }
         },
        /**
         * Show the hint of the element that received focus
         */
         focusListener: function () {
             handlers.action.call(this, 'show');
         },
        /**
         * Hide the hint of the element that lost focus
         */
         blurListener: function () {
             handlers.action.call(this, 'hide');
         },
         /**
          * Initialize listeners for the elements matched by selector
          * @param string [specificSelector] Override the default selector
          * with another one
          */
         init: function (specificSelector) {
            var selector = specificSelector || defaultSelector;
            $(selector).focus(handlers.focusListener);
            $(selector).blur(handlers.blurListener);
         }
      };
   return handlers;
}());

Этот объект можно назвать так, чтобы добавить функциональность подсказки:

hints.init(); // Add focus and blur listeners on all input-text elements

// Add focus and blur listeners on all input-text and radio elements
hints.init('input[type=text], input[type=radio]');