如何更改属于 JS/jQuery 中特定行的按钮文本？

Question

我正在编写 html/php 代码，如下所示，点击按钮后，我想更改 Go 按钮文本到 正在转换 。

<?php  foreach ($programs as $key => $program) {  ?> 
   <tr data-index="<?php echo $key; ?>">
      <td><input style="text-align:center; width:90px;"  onclick="change()" type="submit"  id="go-btn" name="go-button" value="Go" data-id="<?php echo $key; ?>" ></input></td>
   </tr>
<?php }?>

此刻，我在 UI 处有 2 行。下面是检查代码：

<tr data-index="0">
   <td><input onclick="change()" type="submit" id="go-btn" name="go-button" value="Go" data-id="0" class="go-btn btn btn-outline-primary">
   </td>
</tr>

<tr data-index="1">
   <td><input onclick="change()" type="submit" id="go-btn" name="go-button" value="Go" data-id="1" class="go-btn btn btn-outline-primary">
   </td>
</tr>

这是我尝试过的方法，但还需要做更多。

 function change() 
{
    var elem = document.getElementById("go-btn");
    var attribute = elem.getAttribute('data-id');
    console.log(attribute);  // It will print 0 everytime as it is taking the data-id value in the document. 
}

问题陈述：

我想知道我应该在上面的 JS 代码 中做些什么更改，以便在单击按钮时，按钮内的文本属于特定行的应该从 Go 更改为 Converting。

Answer 1

您可以将点击事件侦听器添加到名称为 go-button 的输入。如果您更改 .val 那么这将更改显示给用户的文本。单击按钮后，我还禁用了这些按钮，因为我想这是您情况下的预期行为（即用户必须等待转换完成）。

完成后，如果需要，您可以 re-enable 按钮 .attr("disabled", "false")

N.B。 id 应该是唯一的，因此您应该尽可能更改按钮的 ID。

演示

// Add click event to the inputs with class .go-button
$("input[name='go-button']").click( function() {

  // Change the text of the button, and disable
  $(this).val("Converting").attr("disabled", "true");
  
});

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

<tr data-index="1">
   <td><input type="submit" id="go-btn" name="go-button" value="Go" data-id="1" class="go-btn btn btn-outline-primary">
   </td>
</tr>

如何更改属于 JS/jQuery 中特定行的按钮文本？

How to change button text belonging to a particular row in JS/jQuery?

javascript

php

jquery

button

getattribute

演示