在click和onpresspress上调用相同的jQuery函数

时间:2017-06-26 17:31:15

标签: javascript jquery

我有一个函数,我想在2个不同的事件中调用,但我有一个疑问,因为该函数有一个过滤器点击附件。

我在想做类似的事情:

$('.tabs1 a', toggleTabsOnKeypress);
$('.tabs1 a', toggleTabsOnClick);

这是功能:

var iconTabs = function () {
    tabsSetup();
    $('.tabs1 a').not('.footnote').on('click', function() {
        var $this = $(this); // this
        var $anchorsButThis = $('.tabs1 a').not($(this)); // all <a> tags but this
        var $active = $(this).find('img.img-active').is(':visible'); // return true if the img with img-active class is visible
        var $inactive = $(this).find('img.img-inactive').is(':visible');
        var $tabContainer = $(this).parents('.tab-container');
        var $tabId = $(this).data('tab');

        $eightBoxContent.addClass('opaque-bg');
        $tabContainer.find('.icons-tabs a').addClass('inactive');
        $(this).removeClass('inactive');
        $tabContainer.find('.js-hide-containers .icons-container').hide();
        $tabContainer.find('.js-hide-containers .icons-container[data-tab="'+$tabId+'"]').show();

        $anchorsButThis.each(function() { // loop through other <a>
            $(this).removeClass('selected-shown'); // remove selected-shown
            $(this).find('img.img-active').show(); // show active image
            $(this).find('img.img-inactive').hide(); // hide inactive image
        });

        if(!!$active) {   // if active image is visible
            $(this).find('img.img-active').hide(); // hide active image
            $(this).find('img.img-inactive').show(); // show inactive image
        }
        if(!!$inactive) {  // if inactive image is visible
            $(this).find('img.img-active').show(); // show active image
            $(this).find('img.img-inactive').hide(); // hide active image

            $eightBoxContent.removeClass('opaque-bg');
            $('.js-hide-containers .icons-container').hide();
        }

        $(this).toggleClass('selected-shown');  // toggle selected-shown class

    }).filter('.selected-shown').click();
};

因此,如您所见,函数末尾有click事件。 即使您单击或按下回车键,我也需要该功能完全相同。

类似的东西:

var toggleTabsOnKeypress = function() {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) {
        // repeat the whole iconTabs function
    };
};

有什么建议吗?

1 个答案:

答案 0 :(得分:0)

您可以对on()使用多个活动,并根据需要检查活动type

简单示例:

$('div').on('click mouseenter', handler).click();


function handler(e) {
  if (e.type === 'mouseenter') {
    console.log('Hovering')
  } else if (e.type === 'click') {
    console.log('I was clicked')
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding:40px">
  hover me or click me
</div>