Упрощение функции щелчка на нескольких кнопках

Question

Я написал код (с большим количеством поиска и поиска), который при нажатии кнопки открывает лайтбокс, переключает некоторые классы и загружает некоторый HTML в этот лайтбокс через AJAX. У меня есть 4 кнопки, и вместо того, чтобы писать один и тот же код 4 раза, я хотел бы создать переменную, которая получает идентификатор каждой кнопки, сохраняет идентификатор, а затем загружается в соответствующий 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 в URL, как этот

$(".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

// add class="catbutton" to buttons; you can rename the class 
    $(".catbutton").click(function(e){ 
     e.preventDefault(); 
     $("body").toggleClass("noscroll"); 
     var name = $(this).attr("id"); 
     $.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); 
      } 
     });  
    }); 

Answer 4

Если когда-нибудь вам нужно писать повторно используемый код или код в общем виде для связывания событий к элементам 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(), потому что она позволяет связать несколько событий одновременно (при необходимости), например, для: on('click mouseover mouseout'). Также удаление событий, связанных с использованием on(), может быть легко удалено с использованием off(). Более подробная информация приведена здесь .on() API Document