補足に添付したコードは、span要素に表示されたアイコンをクリックしたら、ajax終了後リダイレクトしているのですが、これを以下のように改造したいのですがご指導いただければ幸いです。
（１）アイコン画像をクリックしたら、アイコン画像をlikeButton_gray.pngに変更する。
（２）アイコン画像をクリックしたら、リダイレクトされるまでアイコン画像をクリックできなくする。
よろしくお願いしますm(_ _)m
23
23
<!DOCTYPE html>
<html lang="ja">
<head>
<{$content_type|smarty:nodefaults}>
<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>
No.1
4973
2154
100pt
こんな感じになると思います。
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 の処理を遅延で動かすようにしています。
No.1
49732154
ここでベストアンサー
100pt
こんな感じになると思います。
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 の処理を遅延で動かすようにしています。
しかし、再びアクティブ化するところでつまずいています。
bind()を使うのか？
「再びアクティブ化する」のタイミングが分からないのですが、unbind() をなかったことにはできないので、あらためて click() か bind() でイベントを処理する関数を登録することになると思います。
コメントありがとうございます。
unbind() をなかったことにはできないので
そうですね。表現がおかしいでした。
あれから頑張ってみましたが、あまりにも経験不足なので問題点がなかなか絞れずにいます。
新しく質問を立てました。お手隙の時にでも見ていただければ幸いです。
1
1
「再びアクティブ化する」のタイミングが分からないのですが、unbind() をなかったことにはできないので、あらためて click() か bind() でイベントを処理する関数を登録することになると思います。
2013/10/16 00:17:25コメントありがとうございます。
そうですね。表現がおかしいでした。
2013/10/16 11:09:36あれから頑張ってみましたが、あまりにも経験不足なので問題点がなかなか絞れずにいます。
新しく質問を立てました。お手隙の時にでも見ていただければ幸いです。