使用变量id单击在链接上调用jQuery函数

Question

你好，我有以下html：

<table class="table table-bordered">
        <thead>
          <tr>
            <th>Docket No. #</th>
            <th>Del Date</th>
            <th>Box</th>
            <th>Status</th>
            <th>Update</th>
          </tr>
        </thead>
        <tbody id="dsr-data">
        </tbody>
    </table>

如何定义jQuery函数来调用jQuery中的updateStatus和deleteStatus函数？我编写了下面的代码，但它的工作不起作用：

<script type="text/javascript">
$( document ).ready(function() {
$(function()
{
    $.getJSON("DsrList.php",{page:"dsrlist",request:  
    "dsrData"},function(json)
    {
        var response = json.response;
        var screen = response.screen;
        var session = response.session;
        var branch = session.branch;
        var username = session.username;
        var dsrNo = session.dsr_no;
        var dsrData = session.dsrData;
        if(screen == "dsrlist"){
            $("#dsr-branch").text(branch);
            $("#dsr-user").text(username);
            $("#dsr_no").text(dsrNo);
            $("#dsr-data").html(dsrData);
        }
    });
});

$(function(){

$.fn.extend({
 uploadStatus: function () {
 var id = $(this).attr('id');
 id = id.replace("upload-", "");
    alert(id);
 }
});

$.fn.extend({
 deleteStatus: function () {
 var id = $(this).attr('id');
 id = id.replace("delete-", "");
    alert(id);
 }
});

$('.action').on('click', function(e) {
if($(this).hasClass('upload')) {
  $(this).uploadStatus();
} else {
  $(this).deleteStatus();
 }
});

});
});
</script>

DsrList.php正在填充以下数据：

<tr>
 <td>812210</td>
 <td>03-12-2016</td>
 <td>10</td>
 <td>out for delivery</td>
 <td>
   <a class="action upload" id="upload-1">
    <img src="img/upload.png" alt="Upload"></a>
  <a class="action delete" id="delete-1">
    <img src="img/delete.png" alt="Delete"></a>
 </td>
</tr>
<tr>
 <td>812211</td>
 <td>03-12-2016</td>
 <td>20</td>
 <td>out for delivery</td>
 <td>
   <a class="action upload" id="upload-2">
    <img src="img/upload.png" alt="Upload"></a>
   <a class="action delete" id="delete-2">
    <img src="img/delete.png" alt="Delete"></a>
 </td>
</tr>

哪个$("#dsr-data").html(dsrData)；赋值。

但是在点击更新/删除图片时，我没有收到任何警告。

请帮我解决这个问题。提前谢谢。

Answer 1

只是在HTML中不要使用onclick属性，因为您正在使用jQuery的扩展属性--您可以正确地使用jQuery，可以将类delete和upload与类action相提并论。

您的HTML应该如下所示：

<a class="action upload" id="upload-1">
    <img src="img/upload.png">
</a>
<a class="action delete" id="delete-1">
    <img src="img/delete.png">
</a>

只需使用jQuery的onClick事件处理程序和hasClass方法就可以知道单击的块用于上传或删除。要获得更好的理解，请参见下面的代码：

你可以这样做：

​

$(function(){

  $.fn.extend({
     uploadStatus: function () {
        alert('Upload Block Clicked : id = ' + $(this).attr('id'));
     }
  });
  
  $.fn.extend({
     deleteStatus: function () {
        alert('Delete Block Clicked: id = ' + $(this).attr('id'));
     }
  });
  
  $(document).on('click', '.action', function(e) {
    if($(this).hasClass('upload')) {
	  $(this).uploadStatus();
    } else {
      $(this).deleteStatus();
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
  <thead>
    <tr>
      <th>Docket No. #</th>
      <th>Del Date</th>
      <th>Box</th>
      <th>Status</th>
      <th>Update</th>
    </tr>
  </thead>
  <tbody id="dsr-data">
    <tr>
      <td>812210</td>
      <td>2016-12-03</td>
      <td>10</td>
      <td>out for delivery</td>
      <td>
        <a class="action upload" id="upload-1">
        <img src="img/upload.png" alt="Upload">
        </a>
        <a class="action delete" id="delete-1">
        <img src="img/delete.png" alt="Delete">
        </a>
      </td>
    </tr>
  </tbody>
</table>

​

希望这能有所帮助！

Answer 2

你可以试试这个。

<script>
   function uploadStatus(id) {
         alert('id =' + id);
   }

   function deleteStatus(id) {
        alert('id =' + id);
   }
</script>