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

您的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 2

首先，ID必须是唯一的然后，使用 .html 方法更改标记之间的内容。

例：

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

Answer 3

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 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保持为所有元素的相同，而是将common属性保留为class。以下修改应该适合你。

<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中有适当的值，所以现在你的逻辑是用它做一些事情。

更改<a> tag with $.ajax</a>的文字

5 个答案: