Jquery - use the same function for multiple requests

问题

I have this CLICK function that works for one specific HTML button. I'd like to use it on multiple buttons, but each button needs to pass different variables to the same page.

BUTTON

<input type="button" id="scs" value="TEST" />

JQUERY

$("#scs").click(function() {
    $("#status").html("<p>Please Wait! TESTING</p>");
$.ajax({
  url: 'go.php?ab=1',
  success: function(data, textStatus, xhr) {
  alert (data);
}
});
});

How can I adapt this so if I have 4 more buttons each button uses the function, calls the same page but uses unique values ?

EG :

<input type="button" id="update" value="update" /> Calls go.php?up=1
<input type="button" id="new" value="new" />  Calls go.php?new=1

etc...

Thanks

回答1:

Give your buttons the same class and call the code using the class name, and add a data attribute to each button to retrieve the seperate values.

Give this a try:

<input type="button" class="clickButton" data-value="go.php?up=1" value="Update" />
<input type="button" class="clickButton" data-value="go.php?new=1" value="New" />

$(".clickButton").click(function() {
    $("#status").html("<p>Please Wait! TESTING</p>");

    $.ajax({
        url: $(this).attr("data-value"),
        success: function(data, textStatus, xhr) {
            alert (data);
            $(this).prop('value', 'New Text');
        }
    });
});

回答2:

Use the data-attribute to to set the url. Use event delegation to target the buttons

<input type="button" class='btn' data-params='up=1' value="update" /> Calls go.php?up=1
<input type="button" class='btn' data-params='new=1' value="new" />  Calls go.php?new=1

$("button").on('click', '.btn', function() {
    var url = 'go.php?' + $(this).data('params');
    $("#status").html("<p>Please Wait! TESTING</p>");
    $.ajax({
        url: url,
        success: function(data, textStatus, xhr) {
            alert (data);
        }
    });
});

回答3:

Use class for click event and new attribute to find the button like 'data-id'

<input type="button" class="clickevent" data-id="update" value="update" />

Jquery

`

$(".clickevent").click(function() {
    $("#status").html("<p>Please Wait! TESTING</p>");
$.ajax({
  url: $(this).attr('data-id'),
  success: function(data, textStatus, xhr) {
  alert (data);
}
});
});

`

回答4:

You can check by the value of the clicked button and use a 'url' variable for the ajax request:

    $("button").click(function() {
        $("#status").html("<p>Please Wait! TESTING</p>");
        var url='';
        var value = $(this).val();
        if(value == 'update'){
          url='go.php?up=1';
        } else if(value=='new') {
          url='go.php?new=1';
        } else if(value=='scs') {
          url='go.php?ab=1';
        }
    $.ajax({
      url: url,
      success: function(data, textStatus, xhr) {
      alert (data);
    }
    });
    });

回答5:

Use same class for each button

<input type="button" id="update" class="click" value="update" /> 
<input type="button" id="new" class="click" value="new" />

$(document).ready(function(){
               $(".click").click(function(){
                  var val=$(this).val();
                  if(val =="update")
                      {
                          $.post("go.php",{'up':'1'},function(data){
                              alert(data);
                          });
                      }
                      else
                          {
                              $.post("go.php",{'new':'1'},function(data){
                              alert(data);
                          });
                          }

               }); 
            });  

来源：https://stackoverflow.com/questions/21379093/jquery-use-the-same-function-for-multiple-requests