улучшение пользовательских советов кода jquery

Question

Хорошо, так вот код для очень очень очень базового лайтбокса jQuery, проблема в том, что мне нужно написать новую строку кода для каждого элемента, по-разному нажимаемого.Мой вопрос заключается в том, как связать этот лайтбокс с каждым классом или идентификатором с прикрепленным к нему чем-то вроде 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

$(this).attr('href') внутри вашего события клика вы получите значение href. Что касается селектора, вы можете просто сделать все элементы, которые вам нужно прикрепить к этому событию клика, с тем же классом?

если вам нужно отфильтровать по rel, вы можете добавить в свой селектор что-то вроде

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

Answer 2

Возможно, вы захотите изменить это так, чтобы данные, отправляемые на 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);
        }
    });

});