Кнопка Text Change по нажатию кнопки цикла

Question

Когда пользователь нажимает кнопку «Список получателей», текст кнопки должен измениться на «загрузка ...». Кнопки находятся в цикле For. Я думаю, что метод атрибута id не будет работать. Логика заключается в том, что когда пользователь нажимает кнопку «Список получателей», кнопка меняется на «загрузка ...» и загружает страницу, на которую она переходит.

@foreach($groups as $group)
  <div class="col-lg-4 col-md-6 col-sm-6">
    <div class="card card-stats">
      <div class="card-header card-header-success card-header-icon">
         <div class="card-icon">
            <i class="material-icons">store</i>
         </div>
         <a class="btn btn-info p-2" href="{{action('ReceiverController@index', $group)}}">
           <i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
               Receiver List
         </a>
      </div>                                    
    </div>
  </div>

Answer 1

просто используйте inline onclick событие javascript:

<a class="btn btn-info p-2" onclick="this.innerHTML='loading...'" href="{{ action('ReceiverController@index', $group) }}">
    <i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
    Receiver List
</a>

, если вы также хотите значок кнопки:

<a class="btn btn-info p-2" onclick="clickfunc(this)" href="{{ action('ReceiverController@index', $group) }}">
    <i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
    Receiver List
</a>

<script>
clickfunc = function(obj) {
    obj.innerHTML = '<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i> loading...';
}
</script>

Answer 2

Предполагая, что класс p-2 уникален для этих кнопок, это должно работать достаточно просто:

$(document).on('click', '.p-2', function(){
    let html = `<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
           Loading...`
    $(this).html(html);
});

Если p-2 не уникально, просто добавьте другое уникальное имя класса.

или без jquery:

function load(){
     let html = `<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
           Loading...`
    this.innerHTML = html;
}
document.getElementsByClassName('.p-2').addEventListener("click", load);