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')

另外作为附注，你应该像这样包装你的插件（这样就不会与$ identifier冲突）

(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();
            });

    });
};

如何从$（this）开始按类选择父项

2 个答案: