Когда кто-то нажимает кнопку «Мне нравится», я проверяю в базе данных, понравилась ли фотография этому человеку. Я использую AJAX, чтобы проверить это.

Когда фотография уже понравилась, сообщение об успехе говорит «уже понравилось», иначе - пустая строка.

Проблема в том, что увеличение «текущих лайков» не работает. Я пытался использовать оповещение, чтобы увидеть число, и оно всегда показывает первое число из первой строки, его значение не увеличивается на currentLikes++.

Что происходит на самом деле? Я определил переменную глобально.

var currentLikes = $(this).next('span').text(); 

$.ajax({
    type: "POST",
    url: "/save_like",
    success: function(msg){
        addLike(msg);
    }
}); 

function addLike(msg){
    if(msg !== 'already liked'){
        currentLikes++;
    }
alert(currentLikes); 
$(this).next('span').html(currentLikes);
}
0
divHelper11 11 Дек 2016 в 05:04

3 ответа

Лучший ответ

Строки: alert(currentLikes); и $(this).next('span').html(currentLikes); не находятся внутри вашего кода AJAX и будут выполняться ДО завершения вызова AJAX. Переместите этот код в функцию addLike, чтобы увидеть правильное значение.

Кроме того, измените код currentLikes = currentLikes++ на currentLikes++, потому что ++ находится в конце вашего выражения, и поэтому это оператор «постинкрементный», это означает, что значение не будет увеличивать, пока ПОСЛЕ текущего оценки не завершится. Если бы вы написали: currentLikes = ++currentLikes и использовали оператор «предварительного приращения», значение было бы увеличено до того, как остальная часть выражения была оценена, и это сработало бы, но просто сказав currentLikes++ (без переназначения обратно на currenLikes лучше - увеличивает значение и сохраняет его в текущей переменной.

Кроме того, this не будет ссылаться на элемент, который вам нужен в обратном вызове, потому что this является изменчивым в JavaScript - его привязка к объекту изменяется в зависимости от того, как вызывается код, который его содержит, поэтому вы Нужно будет обновить, что будет правильная ссылка. Если вы сохраните ссылку на элемент, с которым хотите работать (а не на свойство этого элемента), вы можете обратиться к этому элементу позже с помощью переменной.

Кроме того, вы получаете исходное значение счетчика из span, и оно возвращается к вам в виде строки, вы должны преобразовать это число в число, прежде чем приступить к математике.

Наконец, убедитесь, что msg на самом деле НЕ возвращает 'already liked' EXACTLY AS YOU HAVE IT IN QUOTES. Remember, strings are literals and they are case-sensitive. If there's even an extra space in msg`, ваш код не будет работать должным образом.

// Store a reference to the likes element (not any property value of it)
var currentLikeElement = $(this).next('span'); 

// Now, get the old like count out of the DOM and convert to a number
var likeCount = parseInt(currentLikeElement.text(), 10);

alert(likeCount);

$.ajax({
    type: "POST",
    url: "/save_like",
    success: function(msg){
        // Let's make sure msg is cleaned up and ready for comparison
        // by trimming any leading or trailing spaces off of it and forcing
        // it to all lower-case (because we'll be comparing it to lower-
        // case later).
        msg = msg.trim().toLowerCase();
        addLike(msg);
    }
}); 

function addLike(msg){
  console.log(msg);  // <--  What does this return?
  if(msg !== 'already liked'){
        likeCount++;
  }
  alert(likeCount); 

  // Inject the new like count into the stored object reference:
  currentLikeElement.text(likeCount);
}
1
Scott Marcus 11 Дек 2016 в 02:37

Исходя из примера кода, попробуйте поместить скрипт обновления количества лайков в функцию addLike (msg) .

function addLike(msg){
  if(msg !== 'already liked'){
    currentLikes++;
    $(this).next('span').html(currentLikes);
  }
}
1
Zin Min 11 Дек 2016 в 02:12

Заменить currentLikes = currentLikes++; на currentLikes++;

И поместите $(this).next('span').html(currentLikes); в вашу функцию addLike

2
Zaur Amikishiyev 11 Дек 2016 в 02:10