Question

我的问题很简单，但我找不到任何解决方案。

我有一个功能：

function toggleLabels(){
    $(".hideable").toggle();
    if($(this).parent().parent().hasClass("selected")) {
        $(this).parent().parent().removeClass("selected");
        $('.preview-toggle .message').text('hide options');
    } else {
        $(this).parent().parent().addClass("selected");
        $('.preview-toggle .message').text('show options');
    }
}

我想通过两个不同的事件来打电话：

    $(document).keypress(function(e) {
        if (e.keyCode == 113) { ....

和

    $('.preview-toggle a').click(function() {

是否可以加入活动？我试过.bind（）但没有任何积极的结果：（

谢谢。法比奥

在尝试您的建议后，我决定将事件分开并选择以下格式：

var toggleLabels = function(){
        $(".hideable").toggle();
        if($('.preview-toggle').hasClass("selected")) {
            toggleMargins("show");
            $('.preview-toggle').removeClass("selected");
            $('.preview-toggle .message').text('hide options');
        } else {
            toggleMargins("hide");
            $('.preview-toggle').addClass("selected");
            $('.preview-toggle .message').text('show options');
        }
    }
    $('.preview-toggle a').click(function() {
        toggleLabels()
    });
    $(document).keydown(function(e) {
        if (e.keyCode == 113) {
            toggleLabels()
        }
    });

Answer 1

由于两个事件都是在不同的元素上触发的（'.preview-toggle a'和文档）并且具有不同的类型，因此无法加入它们。因为click事件会使DOM冒泡并到达文档，所以您可以将处理程序设置为文档，如下所示：

var links = $('.preview-toggle a');
$(document).on('keypress click', function(event) {
    if (event.keyCode == 113 || event.type == 'click' && links.index(event.target) > -1)
        toggleLabels();
});

但请注意，引擎盖下的jQuery会在文档上设置两个侦听器，一个用于“keypress”，另一个用于“click”。唯一的另一种方法是在每个处理程序中使用与回调相同的函数：

$('.preview-toggle a').click(toggleLabels);
$(document).keypress(function(e) {
    if (e.keyCode == 113) toggleLabels();
})

另请注意，this - toggleLabels中的$(this)关键字指向不同的元素。您可以将$("someSelector")替换为function toggleLabels(){ $(".hideable").toggle(); var par = $(this).parent().parent(); // store jQuery object here if(par.hasClass("selected")) { // reference to variable par par.removeClass("selected"); // reference again $('.preview-toggle .message').text('hide options'); } else { par.addClass("selected"); $('.preview-toggle .message').text('show options'); }：

暂且不说：您不应多次创建具有相同内容的jQuery对象。如果您需要多次将其存储在变量中并引用该var：

{{1}}

}

加入事件按键（使用keyCode）并单击链接

1 个答案: