Question

我有一个适用于一个特定HTML按钮的CLICK功能。我想在多个按钮上使用它，但每个按钮需要将不同的变量传递到同一页面。

按钮

<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设置网址。使用事件委派来定位按钮

<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

使用点击事件和新属性的类来查找“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

您可以根据点击按钮的值进行检查，并使用＆＃39; url＆＃39; ajax请求的变量：

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

               }); 
            });

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

5 个答案: