无法更改AJAX getJSON上的按钮UI。完成

在创建了AddPosttoFavorite并发布在之后，我不得不改进我的代码，如下所示：， 更改代码后，单击按钮时，按钮UI不会更改

post_page.php

favs.php

我的问题是，当单击按钮时，当ajax返回成功时，按钮应该更改其UI。 在我的例子中，它在页面加载时没有改变，它显示Add，即使在点击按钮之后，ajax返回成功，它仍然是一样的

---

代码的问题是$this，即：在ajax成功函数中，jquery无法找到单击的元素以及应用所需更改的位置。要解决这个问题，您可以将$this存储在某个变量中并使用相同的变量。如下图所示：

$('.button').click(function(e) {
  //getting current element which is clicked
  var button = $(this);
  e.preventDefault();
  $.getJSON('favs.php', {
      user_id: $(this).attr('data-user'),
      director_id: $(this).attr('data-post'),
      method: $(this).attr('method')
    })
    .done(function(json) {
      switch (json.feedback) {
        case 'Like':
          button.attr('method', 'Unlike');
          button.html('<i class="mi mi_sml text-danger" id="' + json.id + '">favorite</i>Remove Favorite').toggleClass('button mybtn'); // Replace the image with the liked button
          break;
        case 'Unlike':
          button.html('<i class="mi mi_sml" id="' + json.id + '">favorite_border</i>Add Favorite').toggleClass('mybtn button');
          button.attr('method', 'Like');
          break;
        case 'Fail':
          alert('The Favorite setting could not be changed.');
          break;
      }
    })
    .fail(function(jqXHR, textStatus, error) {
      alert("Error Changing Favorite: " + error);
    });
});

<?php

include("$_SERVER[DOCUMENT_ROOT]/include/config.php");
include("$_SERVER[DOCUMENT_ROOT]/classes/function.php");

$method = clean_input($_GET['method']);
$user_id = clean_input($_GET['user_id']);
$director_id = clean_input($_GET['director_id']);

switch ($method) {
    case "Like" :
        $query = 'INSERT INTO favorite (memberID, id) VALUES (:mID, :pID)';
        break;
    case "Unlike" :
        $query = 'DELETE FROM favorite WHERE memberID=:mID and id=:pID';
        break;
}
$feedback = 'Fail'; // start with pessimistic feedback
if (isset($query)) {
    $stmt = $conn->prepare($query);
    $stmt->bindParam(':mID', $user_id, PDO::PARAM_INT, 12);
    $stmt->bindParam(':pID', $director_id, PDO::PARAM_INT, 12);
    if ($stmt->execute()) {
        $feedback = $method;
    } // feedback becomes method on success
}
echo json_encode(['id' => $director_id,
    'feedback' => $feedback]);
?>

$('.button').click(function(e) {
  //getting current element which is clicked
  var button = $(this);
  e.preventDefault();
  $.getJSON('favs.php', {
      user_id: $(this).attr('data-user'),
      director_id: $(this).attr('data-post'),
      method: $(this).attr('method')
    })
    .done(function(json) {
      switch (json.feedback) {
        case 'Like':
          button.attr('method', 'Unlike');
          button.html('<i class="mi mi_sml text-danger" id="' + json.id + '">favorite</i>Remove Favorite').toggleClass('button mybtn'); // Replace the image with the liked button
          break;
        case 'Unlike':
          button.html('<i class="mi mi_sml" id="' + json.id + '">favorite_border</i>Add Favorite').toggleClass('mybtn button');
          button.attr('method', 'Like');
          break;
        case 'Fail':
          alert('The Favorite setting could not be changed.');
          break;
      }
    })
    .fail(function(jqXHR, textStatus, error) {
      alert("Error Changing Favorite: " + error);
    });
});