Блог

Главная - Вопросы по программированию - Я хочу изменить конкретный HTML-текст кнопки в jquery, но он не работает

Я хочу изменить конкретный HTML-текст кнопки в jquery, но он не работает

#jquery

#jquery

Вопрос:

Я хочу изменить конкретный HTML-текст кнопки в jquery, но он не работает Это мой код jquery ниже :

 <script>
 
$(document).on('click','.track',function() {
  var track_button_id = $(this).attr("id");
  $.ajax({
    url: 'order_track_Data.php',
    method: 'POST',
    data:{track_button_id:track_button_id},
    cache:false,
    beforeSend:function() {
      $(this).html('<i class="fas fa-sync-alt"></i>');
    },
    success:function(data) {
    $(this).html('<i class="fas fa-calendar-week"></i>');
      alert(data.trim());
    }

  })
})

 </script>

Комментарии:

1. Попробуйте создать переменную для $ (this), как let that = $(this); раньше ajax() , и используйте это в своих функциях.

2. Как комментарий выше: this внутри success находится не та this кнопка, которая была нажата. Хотя that=this это довольно распространено, может быть лучше быть явным, т.Е. var btn = $(this); (как первая строка внутри обработчика кликов), затем использовать btn.attr("id") и btn.html("<i..

3. Как комментарий выше: Кроме того, вы можете использовать функции со стрелками для захвата this внутри встроенных функций.

Ответ №1:

В случае, если комментарии не прояснили:

-обратите внимание, что ваш объект данных также не был правильным

 $(document).on('click','.track',function() {
// assign a variable to the current event target, for later use
  let that = $(this);
  var track_button_id = $(this).attr("id");
  $.ajax({
    url: 'order_track_Data.php',
    method: 'POST',
// also, you will need to something about the data object
    data:{'track_button_id':track_button_id},
    cache:false,
    beforeSend:function() {
      $(this).html('<i class="fas fa-sync-alt"></i>');
    },
    success:function(data) {
// use the variable defined earlier
    that.html('<i class="fas fa-calendar-week"></i>');
      alert(data.trim());
    }

  })
})

Ответ №2:

** Используйте контекст для изменения html **

 <script>
 
$(document).on('click','.track',function() {
  var track_button_id = $(this).attr("id");
  $.ajax({
    url: 'order_track_Data.php',
    method: 'POST',
    data:{track_button_id:track_button_id},
    cache:false,
    context:this,
    beforeSend:function() {
      $(this).html('<i class="fas fa-sync-alt"></i>');
    },
    success:function(data) {
    $(this).html('<i class="fas fa-calendar-week"></i>');
      alert(data.trim());
    }

  })
})

 </script>