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>

然后只需使用网址中的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);
        }
    });
});

Answer 2

要将您拥有的内容转换为函数，只需使用变量替换名称的每个实例，如下所示：

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

可以像这样调用：

setup("jaxx");
setup("anisha");

Answer 3

当您需要以通用方式编写可重用的代码或代码以将事件绑定到元素class时是最佳选择。

为所有按钮指定一个班级名称。说lightBox-toggle。然后使用此类绑定事件。当您使用类选择器时，Jquery将选择具有特定类的所有元素，并将提到的事件绑定到所有元素。所以你的代码就像下面那样..

$(".lightbox-toggle").on('click',function(e){
        //.... your existing stuff

        $.ajax({
            //.... your existing stuff
            url : "/template/"+$(this).attr('id') +"-lightbox.html",
            //...yourexisting stuff
        });     
    });

我刚刚突出显示了对现有代码所需的更改，因此它更清晰。如果有帮助，请告诉我

另请注意，我使用.on()绑定事件，我个人更喜欢使用on()，因为它允许我们同时绑定多个事件（如果需要），例如：{{1 }。使用on('click mouseover mouseout')删除绑定的事件也可以使用on()轻松删除.on() API Document

简化多个按钮上的单击功能

4 个答案: