重写这个函数的聪明方法

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

我会通过向选定的按钮添加一个类，然后从 click 函数中提取 event.target id 来完成此操作：

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

然后使用 like

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

或

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

Answer 3

您可以将事件附加到两者，然后，当您需要检查哪个元素触发了事件时，请使用 <代码>事件.目标。

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

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

        });
    });

});

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

        });
    });

});

如果不起作用请告诉我。