2016-12-11 9 views
0

「好きな」ボタンをクリックすると、その人が既に好きな写真かどうかをデータベースにチェックインしています。私はこれを確認するためにajaxを使用しています。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); 
} 

答えて

1

ライン:alert(currentLikes);$(this).next('span').html(currentLikes);はあなたのAJAXコードの内部ではなく、AJAX呼び出しが完了する前に実行されます。そのコードをaddLikeファンクションに移動して、正しい値を確認します。また

++はあなたの表現の末尾にあるので、それが「ポストインクリメント」演算子であり、それは価値が現在の文が完了した後まで増加しないことを意味するのでcurrentLikes++currentLikes = currentLikes++コードを変更評価する。あなたは書いていた:currentLikes = ++currentLikesと "プリインクリメント"演算子を使用した場合、式の残りの部分が評価されてうまくいく前に値が増加しているだけですが、currentLikes++currenLikesに再割り当てする必要はありません)値と現在の変数に格納し、それは

また、thisthisは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); 
} 
+0

'$(この).next( 'スパン')HTML(currentLikes);' 'もaddLike'機能にする必要があります - ' this'は文句を言わないうーん、それは本当に不思議です –

+0

右もかかわらず...。私がこの 'alert'を' currentLikes = currentLikes ++ 'の直後に置いても、それは私に0を示します。だから、それは全く増加しません。 – divHelper11

+0

@JaromandaXはい、その行も移動する必要があります。 –

2

currentLikes++;

currentLikes = currentLikes++;を交換し、あなたのサンプルコードに基づいて、あなたのaddLike機能

+0

提案してくれてありがとう:D – divHelper11

+1

は実際にはここで$(これ)を使用していません。コンテキストが正しければ変数に代入し、その変数をどこにでも使用することをお勧めします。 –

+0

"this"を変数に保存できますか?D? – divHelper11

0

$(this).next('span').html(currentLikes);を入れ、addLike(MSG)関数内で、あなたのようなカウント更新スクリプトを入れてみてください。

function addLike(msg){ 
    if(msg !== 'already liked'){ 
    currentLikes++; 
    $(this).next('span').html(currentLikes); 
    } 
}