在 php 中完成进程后更改 JS/jQuery 中的按钮文本

Question

我正在编写如下所示的调用 convert.php 脚本的 jQuery/AJAX 代码。

   jQuery(document).ready(function($)
   {
    $('.go-btn').click(function()
    {   
        let target = $(this).attr('data-id'),
            spanEl = $('.file-name[data-id='+ target +']');

        $.ajax({
            url: 'convert.php',
            type: 'POST',
            data: {id: target}, //change to what you want
            success: function(res)
            {
                console.log("Tested");
            },
            error: function(res)
            {

            }
        })
    })  
   });  

在 convert.php 脚本中将 mp4 转换为 mp3。转换完成后，控制台上会打印 Tested。

问题陈述：

我想知道我应该在上面的 jQuery/AJAX 代码中进行哪些更改，以便在转换完成后，属于下面 HTML 代码的按钮文本更改为 Completed

上面的 jQuery/AJAX 代码在按钮点击时被调用。这是属于该按钮的 HTML 代码的 sn-ps：

HTML 代码：

  <?php  foreach ($programs as $key => $program) {  ?> 
       <tr data-index="<?php echo $key; ?>">
          <td><input type="submit" name="go-button" value="Go" data-id="<?php echo $key; ?>" ></input></td>
       </tr>
  <?php }?>

Answer 1

这只是捕获被点击的按钮的问题：

jQuery(document).ready(function($) {
  $('.go-btn').click(function() {
    let target = $(this).attr('data-id'),
      spanEl = $('.file-name[data-id=' + target + ']');
    // Capture the element that received the event
    let btn = this;
    $(btn).val("Converting").prop('disabled', true).css({
      'text-align': 'center',
      'border-color': '#000',
      'width': '120px'
    });
    $.ajax({
      url: 'https://api.myjson.com/bins/80dex',
      method: 'GET', // Change this back to POST
      data: {
        id: target
      }, //change to what you want
      success: function(res) {
        $(btn).val("Completed")
      },
      error: function(res) {
        $(btn).prop('disabled', false).val("Go").removeAttr('style');
      }
    })
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<tr data-index="1">
  <td>
    <input type="submit" name="go-button" class="go-btn" value="Go" data-id="1"></input>
  </td>
</tr>
<tr data-index="2">
  <td>
    <input type="submit" name="go-button" class="go-btn" value="Go" data-id="2"></input>
  </td>
</tr>
<tr data-index="3">
  <td>
    <input type="submit" name="go-button" class="go-btn" value="Go" data-id="3"></input>
  </td>
</tr>