Невозможно изменить пользовательский интерфейс кнопки на AJAX get JSON .done

Question

После создания add post to favorite и публикации в codereview мне пришлось улучшить мой код, как показано ниже, и после изменения кода пользовательский интерфейс кнопки не изменяется при нажатии

post_page . php

<?php
$email = 'user@mail.com';
// Query to get the user_id
$stmt = $conn->prepare('SELECT memberID FROM members WHERE email = :email AND active="Yes" ');
$stmt->execute(array(':email' => $email));
$row = $stmt->fetch();
$mbid = $row['memberID'];

$pid = '4';
// Query to Get the Director ID
$stmt = $conn->prepare('SELECT * FROM allpostdata WHERE id =:id');
$stmt->execute(array(':id' => $pid));
$result = $stmt->fetchAll();
foreach ($result as $row) {

    echo "<p>Director: " . $row['tit'] . "</p> ";
    $fav_image = checkFavorite($mbid, $pid, $conn);
    echo "Favorite? : " . $fav_image . "";
}

function checkFavorite($mbid, $pid, $conn) {
$stmt = $conn->prepare("SELECT * FROM favorite WHERE memberID=:mid AND id=:id");
$stmt->execute(array(':mid' => $mbid, ':id' => $pid));
$count = $stmt->rowCount();
if ($count == 0) {
    echo "<div class='button btn btn-block btn-outline-danger' method='Like'  data-user=" . $mbid . " data-post=" . $pid . "> Add<i class='mi mi_sml ml-2' id=" . $pid . ">favorite_border</i></div>";
} else {
    echo "<div class='button btn btn-block btn-outline-danger' method='Unlike'  data-user=" . $mbid . " data-post=" . $pid . ">Remove<i class='mi mi_sml ml-2' id=" . $pid . ">favorite</i></div>";
}
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>

    $(document).ready(function () {
            $('.button').click(function (e) {
                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'   :
                                    $(this).attr('method', 'Unlike');
                                    $(this).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' :
                                    $(this).html('<i class="mi mi_sml" id="' + json.id + '">favorite_border</i>Add Favorite').toggleClass('mybtn button');
                                    $(this).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);
                        });
            });
        });
</script>

изб. * вернуть успех, кнопка должна изменить свой интерфейс. где еще в моем случае это не меняется, когда при загрузке страницы он показывает Add даже после нажатия на кнопку и ajax return success все еще то же самое.

Answer 1

Проблема с вашим кодом: $(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);
    });
});