Question

当用户点击“a.open-popup”时，我需要一些HTML来改变（1个功能）和一个easylightbox来弹出（另一个功能）。我该怎么做呢？我只能触发2个函数中的1个。

HTML：

<div>
        <p class="plan-msg">Plan message</p>
        <div class="completed-button">
               <a href="#popup01" class="open-popup">Did it</a>
        </div>  
</div>

jQuery函数1（HTML更改）：

jQuery('a.open-popup').click(function(event){
var $parent = jQuery(this).parent();

    event.preventDefault();
    $parent.siblings('.plan-msg').remove();
    $parent.removeClass('completed-button')
                .addClass('add-inv-button ')
                .html('Add to Plan');

});

jQuery function 2（打开simplelightbox）：

$(function(){
    jQuery("a.open-popup").click(function(event) {
           event.preventDefault();
           jQuery(this).simpleLightbox({ closeLink:'a.close' });
     });
})

感谢。

Answer 1

当您进入第一个事件的处理程序时，可以使用.trigger触发自定义触发器，这里是DEMO

Answer 2

jQuery("a.open-popup").simpleLightbox({ closeLink:'a.close' });

你错过了.click()。它应该是：

jQuery("a.open-popup").click(function(evt) {
  evt.preventDefault();
  jQuery(this).simpleLightbox({ closeLink:'a.close' });
});

此将与您的其他处理程序一起使用，这已经是正确的。

修改

好的，以下内容将如果您已在 之前添加了simpleLightbox 的代码，那么>

$(function() {
    jQuery("a.open-popup").simpleLightbox({
        closeLink: 'a.close'
    });

    jQuery('a.open-popup').click(function(event) {
        var $parent = jQuery(this).parent();

        event.preventDefault();
        $parent.siblings('.plan-msg').remove();
        $parent.removeClass('completed-button')
            .addClass('add-inv-button')
            .html('Add to Plan');

    });
});

我已经在jsFiddle http://jsfiddle.net/fZPjg/上发布了一个这样的工作示例。

注意：我使用$(function() {...})表示法与原始帖子一致，但jQuery建议您改用$(document).ready(function() { ... })。目前这两种形式的功能相同。

如何使用1个选择器触发2个事件？

2 个答案: