javascript - 简化多个按钮的点击功能

Question

我编写了一些代码(进行了大量的谷歌搜索和搜索)，单击按钮即可打开一个灯箱，切换一些类并通过 AJAX 将一些 HTML 加载到该灯箱中。我有 4 个按钮，我不想编写 4 次相同的代码，而是创建一个变量来获取每个按钮的 ID、存储 ID，然后加载到相应的 HTML 文档中。我有一个想法，但我只需要一些指导。两个按钮的示例:

        $("#jaxx").click(function(e){
           e.preventDefault();
           $("body").toggleClass("noscroll");
            $.ajax({
                context: $('#lightbox-holder'),
                type: 'POST',
                dataType : "html",
                url : "/template/jaxx-lightbox.html",
                success : function(results) {
                    setTimeout(function() {
                        $('#lightbox-holder').html(results);
                        $('section#lightbox').addClass("open");
                    },100);
                    setTimeout(function() {
                        $('a.xbutton').addClass("open");
                    },300);
                }
            });     
        });

        $("#anisha").click(function(e){
           e.preventDefault();
           $("body").toggleClass("noscroll");
            $.ajax({
                context: $('#lightbox-holder'),
                type: 'POST',
                dataType : "html",
                url : "/template/anisha-lightbox.html",
                success : function(results) {
                    setTimeout(function() {
                        $('#lightbox-holder').html(results);
                        $('section#lightbox').addClass("open");
                    },100);
                    setTimeout(function() {
                        $('a.xbutton').addClass("open");
                    },300);
                }
            });     
        });

顺便说一下，这些是猫，不是脱衣舞娘。

Answer 1

如果除了 ID 之外还为按钮指定一个类，则可以轻松定位所有按钮

<button class="cat" id="jaxx">Jaxx</button>
<button class="cat" id="anisha">Anisha</button>

然后只需在 URL 中使用 ID，如下所示

$(".cat").on('click', function(e) {
    e.preventDefault();

    var id = this.id

    $("body").toggleClass("noscroll");
    $.ajax({
        type: 'POST',
        dataType: "html",
        url: "/template/"+ id +"-lightbox.html",
        success: function(results) {
            setTimeout(function() {
                $('#lightbox-holder').html(results);
                $('#lightbox').addClass("open");
            }, 100);
            setTimeout(function() {
                $('.xbutton').addClass("open");
            }, 300);
        }
    });
});