умный способ переписать эту функцию

Question

У меня есть это, и я показываю div, если пользователь нажал одну кнопку, и не показывает ее, если пользователь нажал другую.Это работает, но глупо делать это с повторением

$j(document).ready(function() {
    $j('#Button1').click( function () { 
        var data = $j("form").serialize();
        $j.post('file.php', data, function(response){       
            $j("#Response").show();
        });
    });
    $j('#Button21').click( function () { 
        var data = $j("form").serialize();
        $j.post('file.php', data, function(response){       
            //do something else          

        });
    });
}); 

Answer 1

Я бы сделал это, добавив класс к выбранным кнопкам, а затем вытащил идентификатор event.target из функции щелчка:

    $j('.buttons').click(function(e) {
        var buttonId = e.target.id,
            data = $j("form").serialize();

        $j.post('file.php', data, function(response) {
            switch (buttonId) {
                case "Button1":
                    $j("#Response").show();
                    break;
                case "Button21":
                    //do something else
                    break;
            }
        });
    });

Answer 2

Вам необходимо абстрагировать данные от функциональности.

sendClick('#Button1', function() {
  $j('#Response').show();
});

sendClick('#Button21', function() {
  // do something
});

функция sendClick

function sendClick(selector, callback)
{
  $j(selector).click( function () { 
    var data = $j("form").serialize();
    $j.post('file.php', data, callback);
  });
}

Таким образом, вы можете повторять одну и ту же функцию снова и снова, изменяя селектор и обратный вызов. Вы можете настроить это еще дальше:

function sendClick(selector, options, callback)
{
  // handle arguments
  if(typeof options == 'function') { 
    callback = options;
    options = {};
  } else {
    options = options || {};
  }

  $j.extend({
    form: 'form',
    file: 'file.php'
  }, options);

  // abstracted logic
  $j(selector).click(function() { 
    var data = $j(options.form).serialize();
    $j.post(options.file, data, callback);
  });
}

затем используйте как

sendClick('#select', {form: '#anotherForm'}, function() {
  // do something
});

или

sendClick('#another', function(response) {
  // something else
});

Answer 3

$(document).ready(function() {

    $('#Button1 #Button21').click(function() {
        var that = this.attr("id");
            data = $('form').serialize();

        $.post('file.php', data, function(response) {

            if ( that === 'Button1' ) {
                $('#Response').show();
            } else {
                //do something else   
            }

        });
    });

});

Дайте мне знать, если он не работает.

Answer 4

$j(function($) {

    $('#Button1', '#Button21').click(function() {
        var that = this,
            data = $('form').serialize();

        $.post('file.php', data, function(response) {

            if ( that.id === 'Button1' ) {
                $('#Response').show();
            } else {
                //do something else   
            }

        });
    });

});

Answer 5

Вы можете прикрепить событие к обоим, а затем, когда вам нужно проверить, какой элемент вызвал событие, используйте event.target.

$j(function() {
    $j('#Button1, #Button2').click( function (event) { 
        var data = $j("form").serialize();

         $j.post('file.php', data, function(response){       

             if ($(event.target).is('#Button1')) {
                 $j("#Response").show();
             } else {
                 // Do something else          
             }

         });
    });
});

Answer 6

Вот два разных способа:

---

Вы можете объединить два обработчика в один обработчик:

$j(document).ready(function () {
    $j('#Button1, #Button21').click(function() {
        var id = this.id;
        var data = $j("form").serialize();
        $j.post('file.php', data, function(response) {
            if (id == 'Button1') {
                // Show
            } else {
                // Do something else
            }
        });
    });
});

---

Или написать специальный тип обработчика:

$j.fn.clickAndPost = function (handler) {
    this.click(function () {
        var me = this;
        var data = $j("form").serialize();
        $j.post('file.php', data, function(response) {
            handler.call(me);
        });
    });
});

... и прикрепите два из них:

$j(document).ready(function () {
    $j('#Button1').clickAndPost(function () {
        // Show
    });

    $j('#Button21').clickAndPost(function () {
        // Do something else
    });
});