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

Question

我正在编写 html/php 代码，如下所示，在单击按钮时，我想将 Go 按钮文本更改为 Converting强>。

<?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，那么这将更改显示给用户的文本。在单击按钮后，我还禁用了按钮，因为我想这是您的预期行为（即用户必须等待转换完成）​​。

完成后，如有必要，您可以使用.attr("disabled", "false")重新启用该按钮

注意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>