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

您需要从功能中抽象数据。

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 2

我是通过在所选按钮中添加一个类，然后从点击功能中提取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 3

以下是两种不同的方式：

您可以将两个处理程序组合成一个处理程序：

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

您可以将事件附加到两者，然后，当您需要检查触发事件的元素时，请使用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 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   
            }

        });
    });

});

如果它不起作用，请告诉我。

聪明的方法来重写这个功能

6 个答案: