Как определить тип элемента, на котором было инициировано событие - PullRequest
1 голос
/ 01 апреля 2011

Я использую следующий модуль для отображения подменю:

icisSite.fatNav = function(trigger){

    function init() {
        width = 0,
        $mainMenuListEl = $('.nav-SiteNav .nav-list > li'),
        $subNav = $('.subNav > li > ul');
        appendSubNav();
        getWidth();
    };

    function appendSubNav(){
        $subNav.each(function(index){
            index = ++index;
            $(this).appendTo($mainMenuListEl[index]);   
        });    
    };

    function subNavShow(trigger){
        setWidth(trigger);
        trigger.toggleClass('hover');   
    };

    function subNavHide(trigger){
        trigger.toggleClass('hover');
        trigger
        .find('ul')
        .removeAttr('style');
    };

    function getWidth(){
        $mainMenuListEl.each(function(index){
            width += parseInt($(this).outerWidth());
        });

        width = width - 11;
    };

    function setWidth(trigger){
        trigger
        .find('ul')
        .css({'width': width}); 
    };

    return {
        setup: init,
        show: subNavShow,
        hide: subNavHide
    };

}();

icisSite.fatNav.setup();

$('.nav-SiteNav .nav-list > li:gt(0)').hover(function() {
    $this = $(this);
    icisSite.fatNav.show($this);    
},function(e) {
    icisSite.fatNav.hide($this);
});

$('.nav-SiteNav .nav-list > li:gt(0) a').focusin(function() {

    var $this = $(this);

    $this
    .parent()
    .toggleClass('hover');

    $this
    .parent()
    .find('ul')
    .css({'width': icisSite.width});

}); 

$('.nav-SiteNav .nav-list > li:gt(0) a').focusout(function() {

    var $this = $(this);

    $this
    .parent()
    .toggleClass('hover');

    $this
    .parent()
    .find('ul')
    .removeAttr('style');

});

Я хочу выполнить рефакторинг для размещения событий фокусировки и фокусировки.Поскольку код очень похож на событие hover, но не тот же.

Я не уверен, как это сделать, кроме проверки типа элемента, который является «триггером», и задаюсь вопросом, есть ли лучший способ?

Я даже не уверен, как получить тип элемента?Поэтому, если бы это был hover, он бы возвратил элемент li, а фокус - элемент привязки.

Ответы [ 2 ]

4 голосов
/ 01 апреля 2011

Если вы хотите проверить, является ли объект jQuery чем-то, что вы можете просто использовать .is()

if($(this).is('li')){
}

if($(this).is('a')){
}

Кроме того, вы можете изменить рефокусировку, сфокусировав некоторые какхорошо, проверив event.type

не проверено , но может выглядеть примерно так ...

$('.nav-SiteNav .nav-list > li:gt(0) a').bind("focusin, focusout", function(event) {
    var $this = $(this);
    $this
    .parent()
    .toggleClass('hover');

    $this
    .parent()
    .find('ul');

   if(event.type =="focusout"){
     $this.removeAttr('style');
   }
   else
   {
     $this.css({'width': icisSite.width});
   }
});
1 голос
/ 01 апреля 2011

Не будет ли

$(this).get(0).tagName

лучшим способом получить тип тега, вместо того, чтобы идти

if($(this).is('li')){
}

?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...