jQueryで画像クリックによる挙動の質問です。

補足に添付したコードは、span要素に表示されたアイコンをクリックしたら、ajax終了後リダイレクトしているのですが、これを以下のように改造したいのですがご指導いただければ幸いです。

(1)アイコン画像をクリックしたら、アイコン画像をlikeButton_gray.pngに変更する。
(2)アイコン画像をクリックしたら、リダイレクトされるまでアイコン画像をクリックできなくする。

よろしくお願いしますm(_ _)m

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/10/15 11:34:29
  • 終了:2013/10/16 00:06:27
id:appfb

質問者から

appfb2013/10/15 11:36:45
<!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>

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4487ベストアンサー獲得回数18562013/10/15 13:06:09

ポイント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 の処理を遅延で動かすようにしています。

他3件のコメントを見る
id:a-kuma3

しかし、再びアクティブ化するところでつまずいています。
bind()を使うのか?

「再びアクティブ化する」のタイミングが分からないのですが、unbind() をなかったことにはできないので、あらためて click() か bind() でイベントを処理する関数を登録することになると思います。

2013/10/16 00:17:25
id:appfb

コメントありがとうございます。

unbind() をなかったことにはできないので

そうですね。表現がおかしいでした。

あれから頑張ってみましたが、あまりにも経験不足なので問題点がなかなか絞れずにいます。
新しく質問を立てました。お手隙の時にでも見ていただければ幸いです。

2013/10/16 11:09:36

その他の回答(0件)

id:appfb

質問者から

appfb2013/10/15 11:45:22

質問文を編集しました。詳細はこちら

id:a-kuma3 No.1

a-kuma3回答回数4487ベストアンサー獲得回数18562013/10/15 13:06:09ここでベストアンサー

ポイント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 の処理を遅延で動かすようにしています。

他3件のコメントを見る
id:a-kuma3

しかし、再びアクティブ化するところでつまずいています。
bind()を使うのか?

「再びアクティブ化する」のタイミングが分からないのですが、unbind() をなかったことにはできないので、あらためて click() か bind() でイベントを処理する関数を登録することになると思います。

2013/10/16 00:17:25
id:appfb

コメントありがとうございます。

unbind() をなかったことにはできないので

そうですね。表現がおかしいでした。

あれから頑張ってみましたが、あまりにも経験不足なので問題点がなかなか絞れずにいます。
新しく質問を立てました。お手隙の時にでも見ていただければ幸いです。

2013/10/16 11:09:36

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません