Question

我有一个函数，我想在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
    };
};

有什么建议吗？

Answer 1

您可以对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>

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

1 个答案: