多个按钮使用相同的#id来执行相同的功能？

Question

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，但只有第一个按钮打开弹出框，无论如何，我可以让每一个按钮打开相同的弹出框？

Answer 1

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);

Answer 2

对所有按钮使用公共类

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