Блог

Главная - Вопросы по программированию - умный способ переписать эту функцию

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

#jquery-selectors #jquery

#jquery-селекторы #jquery

Вопрос:

У меня есть это, и я показываю 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          

        });
    });
});

Ответ №1:

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

     $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;
            }
        });
    });

Комментарии:

1. Я не думаю, что обнаружение цели и использование инструкции switch — хорошая идея. Это привязывает поведение к определенному стилю dom. Вы предполагаете, что элементы dom имеют идентификатор. Кроме того, использование инструкции switch может быстро стать неуправляемым, когда у вас более 20 элементов, каждый из которых выполняет определенный набор действий.

Ответ №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
});

Ответ №3:

Вы можете прикрепить событие к обоим, а затем, когда вам нужно проверить, какой элемент вызвал событие, используйте 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          
             }

         });
    });
});

Ответ №4:

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

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

 $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
    });
});

Ответ №5:

 $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   
            }

        });
    });

});

Ответ №6:

 $(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   
            }

        });
    });

});

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