Question

我正在处理如下所示的jQuery / AJAX代码，该代码调用convert.php脚本。

   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代码的按钮文本变为已完成

上面的jQuery / AJAX代码在单击按钮时被调用。以下是属于该按钮的HTML代码段：

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>

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

1 个答案: