Как изменить текст кнопки, принадлежащей определенной строке в JS / jQuery? - PullRequest
Новая
       17

Как изменить текст кнопки, принадлежащей определенной строке в JS / jQuery?

0 голосов
/ 12 июня 2019

Я работаю над 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 }?>

На данный момент у меня есть 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 на Преобразование .

1 Ответ

1 голос
/ 12 июня 2019

Вы можете добавить прослушиватель событий щелчка для входов с именем go-button. Если вы измените. val, это изменит текст, отображаемый для пользователя. Я также отключил кнопки после их нажатия, так как я предполагаю, что это ожидаемое поведение в вашем случае (т. Е. Пользователь должен ждать завершения преобразования).

После завершения вы можете повторно включить кнопку при необходимости с помощью .attr("disabled", "false")

N.B. 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>
...