Измените свойства img (sr c, alt ...) на основе AJAX успеха (и исправьте мой ajax;))

Question

Ссылка на изображение, которую я использую:

echo "<br/><div class='right' id='post" . $id . "'>
<img id='thumb' src='/images/like.png' title='Like it?' alt='Like button' 
          onClick='likeButton(" . $id . ");'>( " . getLikes($id) . " )</div><br/>";

, а JavaScript это:

function likeButton(id) {
    $.ajax({
        url: "../../likes/" + id, 
        type: "post", 
        data: {
            id: id},
        success: function(likes) {
        $('#post' + id).html(likes);
    }}); 
}

«лайков» - это функция PHP, которая добавляет клик к db, и он также возвращает число (getLikes($id)).

Но здесь есть несколько ошибок. Когда я щелкаю, изображение исчезает, и у меня остается только номер

Вместо этого мне нужно, чтобы оно продолжало показывать изображение (и скобки вокруг числа) - но измените изображение sr c и alt, если функция PHP getLikes($id) == "true".

Кто-нибудь берут?

Answer 1

Вместо замены содержимого ВСЕГО поста просто измените значение лайков:

( " . getLikes($id) . " ) => <span class="likes">( " . getLikes($id) . " )</span>

и

$(`#post${id} .likes`).text(`(${likes})`);

---

РЕДАКТИРОВАТЬ: Дополнительный вопрос:

Вы спрашивали о запрете нажатия более одного раза. Вы можете добавить флаг, чтобы знать, что они уже щелкнули.

ПРИМЕЧАНИЕ: это будет только один, пока они не перезагрузят страницу, это не лучшее решение, если вы действительно хотите заблокировать их. Вместо этого ваш сервер должен предотвратить это на стороне сервера в PHP (например, проверьте, понравилось ли им уже, прежде чем увеличивать счетчик по идентификатору пользователя + идентификатору сообщения).

function likeButton(id) {
    if ($('#post' + id).hasClass('already-liked')) {
        return;
    }
    $('#post' + id).addClass('already-liked');

    $.ajax({
        url: "../../likes/" + id, 
        type: "post", 
        data: {
            id: id},
        success: function(likes) {
        $('#post' + id).html(likes);
    }}); 
}