我有一个函数,我想在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
};
};
有什么建议吗?
答案 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>