Jquery - 對多個請求使用相同的函數

Question

我有這個CLICK函數適用於一個特定的HTML按鈕。 我想在多個按鈕上使用它，但每個按鈕需要將不同的變量傳遞到同一頁面。

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

我如何調整這一點，如果我有4個按鈕，每個按鈕使用該功能，調用相同的頁面但使用唯一值？

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

等等...

謝謝

Answer 1

為按鈕指定相同的類並使用類名調用代碼，並為每個按鈕添加數據屬性以檢索單獨的值。

嘗試一下：

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

Answer 2

使用data-attribute設置url。 使用事件委派來定位按鈕

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

Answer 3

使用click for click事件和new屬性來查找'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);
}
});
});

`

Answer 4

您可以通過單擊按鈕的值進行檢查，並為ajax請求使用'url'變量：

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

Answer 5

每個按鈕使用相同的類

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

               }); 
            });