具有相同#id的多个按钮可以执行相同的功能吗?

时间:2014-12-12 09:41:53

标签: javascript jquery button bpopup

JS初学者,对不起

我怎样才能使每个具有id“#popit”的按钮打开同一个弹出框?

我正在使用bPopup

使用此代码,网站上只有一个按钮可以打开弹出窗口

;(function($) {
    $(function() {
        $('#my-button').bind('click', function(e) {
            e.preventDefault();
            $('#element_to_pop_up').bPopup();
        });
    });
})(jQuery);

http://jsfiddle.net/yg5so25s/ - 有3个按钮具有相同的ID,但只有第一个按钮打开弹出框,无论如何我可以使每个按钮打开相同的弹出框?

2 个答案:

答案 0 :(得分:9)

id必须是唯一的,您需要使用类:

<button class="my-button">POP IT UP</button>

然后您可以使用.按类名来定位元素:

;(function($) {
    $(function() {
        $('.my-button').bind('click', function(e) {
            e.preventDefault();
            $('#element_to_pop_up').bPopup();
        });
    });
})(jQuery);

<强> Updated Fiddle

答案 1 :(得分:2)

为所有按钮使用通用类

$('.commonClass').bind('click', function(e) {
            e.preventDefault();
            $('#element_to_pop_up').bPopup();
        });

<强> DEMO