如何從$（this）開始按類從父級選擇子項

Question

我正在創建一個自定義jQuery插件，用於在輸入框上添加幾張圖像。高亮類正在運行完美，但我需要使用.toggle（）中的選擇器來顯示和隱藏INPUTBANNER類。

jQuery.fn.inputmenu = function() { 
    function createInputMenu(node) { 
     $(node).bind('focus', function() { 
      $(this).parent().toggleClass('highlight'); 

      //SHOW INPUTBANNER CLASS 
      $(this).parent().('.inputbanner').toggle(); 
     }); 
     $(node).bind('blur', function() { 
      $(this).parent().toggleClass('highlight'); 

      //HIDE INPUTBANNER CLASS 
      $(this).parent().('.inputbanner').toggle(); 
     }); 
     $(node).parent().append('<div class="inputbanner">some images here</div>'); 
    } 
    return this.each(function() { 
     createInputMenu(this); 
    }); 
}; 

Answer 1

這似乎是你是什麼後，你不要回去了給家長，然後再回落到.inputbanner選擇它，因爲inputbanner是你可以做一個兄弟：

// use .prev() if the element is before 
$(this).next('.inputbanner') 

另外，作爲一個側面說明，你應該換你的插件像這樣（所以沒有科爾用$標識isions）

(function($) { 
    $.fn.inputmenu = function() { 
     // plugin implementation here 
    } 
})(jQuery); 

Answer 2

我想看到你的DOM/HTML標記來測試它的狀態，但試試這個：

jQuery.fn.inputmenu = function() { 
    return this.each(function() { 
      var $node= $(this); 
$node.parent().append('<div class="inputbanner" style="display:none">some images here</div>'); 
     var $nodeImageContainer= $node.parent().find('div.inputbanner').eq(0); 
      $node.bind('focus', function() { 
       //SHOW INPUTBANNER CLASS 
       $nodeImageContainer.addClass('highlight').show(); 
      }) 
      .bind('blur', function() { 
       //HIDE INPUTBANNER CLASS 
       $nodeImageContainer.removeClass('highlight').hide(); 
      }); 

    }); 
};