<!DOCTYPE html> <html lang="ja"> <head> <{$content_type|smarty:nodefaults}> <link rel="stylesheet" href="<{$root_surl}>css/master.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> //--- ajax function nextLikeFunc(){ var fb_id = '<{$fb_id}>'; var url = '<{$app_question_url}>'; $.ajax({ type: 'post', url: 'ajax_like.php', data: {fbid:fb_id}, success: function(data){ location.href=url+ "?fbid=" +fb_id; } }); } $(function(){ $("span.likeBtn").click(nextLikeFunc); }); </script> <style type="text/css"> <!-- .likeBtn { display: inline-block; background: url(../images/likeButton_active.png) no-repeat 0 0; width: 40px; height: 40px; _width: 40px; _height: 40px; cursor: pointer; margin: 0px 10px 0px 0px; } .likeBtn:hover { background-position: 0px -40px; } --> </style> </head> <body> <span class="likeBtn"></span> </body> </html>
▽1
●
a-kuma3 ●100ポイント ベストアンサー |
こんな感じになると思います。
function nextLikeFunc(){ // ★画像を入れ替えて、click の処理を外す $(this) .css("background-image", "url(../images/likeButton_gray.png)") .unbind("click"); setTimeout(function() { // ★画像が変わらないと思うので、setTimeout で ajax を動かす var fb_id = '<{$fb_id}>'; var url = '<{$app_question_url}>'; $.ajax({ type: 'post', url: 'ajax_like.php', data: {fbid:fb_id}, success: function(data){ location.href=url+ "?fbid=" +fb_id; } }); }, 0); }
背景画像の入れ替えは .css() 、クリックしたときの処理を外すのは .unbind() です(どちらも、jQuery)。
http://api.jquery.com/css/
http://api.jquery.com/unbind/
軽く試してみたら、$.ajax() の処理が終わらないと画像が変わらないような気がしたので、setTimeout() で ajax の処理を遅延で動かすようにしています。