改进自定义jquery代码提示

Question

好的，这是一个非常基本的jQuery lightbox的代码，问题是我需要为每个不同单击的元素编写新的代码行。我的问题是，如何将此lightbox绑定到每个类或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')会给出href值。作为选择器，您是否可以将需要附加到此单击事件的所有元素都添加到同一个类中？

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

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