改變<a>標籤的文本與$就

Question

考慮下面的HTML代碼

<a id="retailsale_bill_cancel" id_to_cancel="41" bill_no="10">cancel</a> 
<a id="retailsale_bill_cancel" id_to_cancel="42" bill_no="10">cancel</a> 
<a id="retailsale_bill_cancel" id_to_cancel="43" bill_no="10">cancel</a> 
<a id="retailsale_bill_cancel" id_to_cancel="44" bill_no="10">cancel</a> 

當用戶點擊取消，我想改變這種狀況對應的文本被「取消」， 爲了這個，我已經試過了谷歌上搜索我當以下

$(document).on("click", "#retailsale_bill_cancel", function(){ 
    var bill_no = $(this).attr('bill_no'); 
    var id_to_delete = $(this).attr('id_to_cancel'); 

    var request = $.ajax({ 
          url: "./php/retailsale_bill_cancel/cancel.php", 
          type: "POST", 
          data: { bill_no: bill_no, id_to_delete: id_to_delete }, 
          beforeSend: function(){ 
           //what can i do here to change that <a tags text to "cancelling...." 
          } 
         }); 

     //WHEN SUCCESS 
     request.success(function(data) { 
      //what can i do here to change that <a tags text 
     }); 
     request.done(function(data){ 

     }); 
}); 

來了解$（這）可以解決問題，但我不能得到任何整齊的教程或例子， 任何幫助將是有益的， 感謝

Answer 1

ID必須是在HTML獨特的，我會建議你使用data-*前綴屬性。此外，我建議你使用一個通用類的選擇

試試這個

$(document).on("click", "#retailsale_bill_cancel", function(){ 

    var self= $(this); //Store the refence in another variable like 

    var request = ... 

     //WHEN SUCCESS 
     request.success(function(data) { 
      //what can i do here to change that <a tags text 
      self.html('New text'); 
     }); 
}); 

Answer 2

首先，ID必須是唯一的。
然後，使用.html方法更改標籤之間的內容。

例：

$("#retailsale_bill_cancel_42").html("New text"); 

Answer 3

你的HTML可以是：連接

<div id="commonAtagsAncestor"> 
    <a class="retailsale_bill_cancel" data-idCancel="41" data-id="10">cancel</a> 
    <a class="retailsale_bill_cancel" data-idCancel="42" data-id="10">cancel</a> 
    <a class="retailsale_bill_cancel" data-idCancel="43" data-id="10">cancel</a> 
    <a class="retailsale_bill_cancel" data-idCancel="44" data-id="10">cancel</a> 
</div> 

的JS ...

$('#commonAtagsAncestor').click(function(e){ 
    var $t = $(e.target); 

    if($t.is('a.retailsale_bill_cancel')){ 
     var idcancel = $t.data('idCancel'), 
      id = $t.data('id'), 
      request = $.ajax({ 
       url: "./php/retailsale_bill_cancel/cancel.php", 
       type: "POST", 
       data: { 
        bill_no: id, 
        id_to_delete: idcancel 
       },beforeSend: function(){ 
       $t.text('cancelling ...'); // Text changed 
       } 
      }); 
      e.preventDefault(); 
     //WHEN SUCCESS 
     request.success(function(data) { 
      $t.text('cancelled !'); // Text changed 
     });  
    } 
}); 

Answer 4

你可以嘗試下面的代碼，我已經顯示了你想要的按鈕點擊

var request = $.ajax({ 
          url: "./php/retailsale_bill_cancel/cancel.php", 
          type: "POST", 
          data: { bill_no: bill_no, id_to_delete: id_to_delete }, 
          beforeSend: function(){ 
           $(this).html("cancelling"); 

          } 
         }); 

     //WHEN SUCCESS 
     request.success(function(data) { 
      $(this).html("cancelled"); 
     }); 
     request.done(function(data){ 

     }); 

演示： - http://jsfiddle.net/wf8yJ/12/

Answer 5

元素請注意ID應該是唯一的。 因此，不要將所有元素的id保持爲相同的類別。修改如下 應該適合你。

<a class="retailsale_bill_cancel" id_to_cancel="41" bill_no="10">cancel</a> 
<a class="retailsale_bill_cancel" id_to_cancel="42" bill_no="10">cancel</a> 
<a class="retailsale_bill_cancel" id_to_cancel="43" bill_no="10">cancel</a> 
<a class="retailsale_bill_cancel" id_to_cancel="44" bill_no="10">cancel</a> 

您可以通過此

var id_to_delete; 
$(".retailsale_bill_cancel").click(function(){ 
     $(this).text("cancelled"); 
     id_to_delete = $(this).attr('id_to_cancel'); 
}); 

獲得點擊的元素現在在id_to_delete有適當的值，因此現在它你的邏輯做一些事情吧。