Question

好的，这里是一个非常非常基本的jQuery灯箱的代码，问题是我需要为每个不同的点击元素编写新的代码行。我的问题是如何将这个灯箱绑定到每个类或id与rel =“qpLighbox”附加的东西，并使用href标签通过AJAX获取所需的文件。所以这是当前的代码

$(".user_settings").click(function() {

         $("#qpbox-content").show();
         $("#qpbox-overlay").show();
         $("#qpbox-loader").html("<img src='images/4.gif' />");

         var xhr = $.ajax({
         type: "GET",
         url: "ajax.php",
         data: "ajax=1&ajax_f=user[settings]",
         success: function(html){
            $("#qpbox-utm").html(html);
            $("#qpbox-loader").html("");
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {$("#qpbox-loader").html(errorThrown);}
         });

         });

Answer 1

您可能希望对此进行修改，以便发送到URL的数据可以更改（例如，通过向链接添加data-xx属性，其中xx是数据的名称。）

// Binds the lightbox to all links whose rel attribute is qpLightbox
$("a[rel='qpLightbox']").click(function(e) {
    e.preventDefault();

    // Use the link's href attribute as the src for the lightbox content.
    var url = $(this).attr("href");

    $("#qpbox-content").show();
    $("#qpbox-overlay").show();
    $("#qpbox-loader").html("<img src='images/4.gif' />");

    $.ajax({
        type: "GET",
        url: url,
        data: "ajax=1&ajax_f=user[settings]",
        success: function(html) {
            $("#qpbox-utm").html(html);
            $("#qpbox-loader").html("");
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            $("#qpbox-loader").html(errorThrown);
        }
    });

});

Answer 2

$(this).attr('href') 在click事件中，为您提供href值。从选择器开始，您可以使用相同的类创建需要附加到此click事件的所有元素吗？

如果您需要按rel过滤，可以在选择器中添加类似

的选项卡

$('.yourClass[rel=\'yourRel\']')

改进自定义jquery代码提示

2 个答案: