Jquery - 对多个请求使用相同的函数

Question

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

Answer 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');
        }
    });
});