jQueryで画像ｸﾘｯｸによる挙動の質問です｡補足に添付したｺｰﾄﾞは､span要素に表示されたｱｲｺﾝをｸﾘｯｸしたら､ajax終了後ﾘﾀﾞｲﾚｸﾄしているのですが､これを…

人力検索はてな

ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら

jQueryで画像ｸﾘｯｸによる挙動の質問です｡
補足に添付したｺｰﾄﾞは､span要素に表示されたｱｲｺﾝをｸﾘｯｸしたら､ajax終了後ﾘﾀﾞｲﾚｸﾄしているのですが､これを以下のように改造したいのですがご指導いただければ幸いです｡

(1)ｱｲｺﾝ画像をｸﾘｯｸしたら､ｱｲｺﾝ画像をlikeButton_gray.pngに変更する｡
(2)ｱｲｺﾝ画像をｸﾘｯｸしたら､ﾘﾀﾞｲﾚｸﾄされるまでｱｲｺﾝ画像をｸﾘｯｸできなくする｡

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

●質問者: appfb
●ｶﾃｺﾞﾘ:ｳｪﾌﾞ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

● 質問者から

<!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 の処理を遅延で動かすようにしています｡

appfbさんのｺﾒﾝﾄ
ご回答ありがとうございます｡いつもありがとうございます｡今からﾘﾌｧﾚﾝｽとにらめっこしながらﾄﾗｲしてみます｡

appfbさんのｺﾒﾝﾄ
教えていただいたｺｰﾄﾞは動作を確認できました｡ setTimeoutを使うなど絶対考え付かないのでとても勉強になりました｡ｱｲｺﾝ画像は2つｺﾝﾄﾛｰﾙし､数ｶ所から呼び出すのでｸﾞﾚｰｱｳﾄは関数にしました｡しかし､再びｱｸﾃｨﾌﾞ化するところでつまずいています｡ bind()を使うのか？ jQo.unbind( ｲﾍﾞﾝﾄ名, false)を工夫するのか･･･？といろいろ試してみますが全然できずにいます｡ btnGrayoutFunc()をなかったことにはできないのですか？例えば､ajax正常終了時のsuccess: function(data){}で､再びｱｸﾃｨﾌﾞ化するなど｡何度もすみませんm(_ _)m >|javascript| function btnGrayoutFunc(){ $(".likeBtn").unbind("click").css("background", "url(../images/likeButton_gray.png) no-repeat 0 0").css("cursor", "default"); $(".quizBtn").unbind("click").css("background", "url(../images/quizButton_gray.png) no-repeat 0 0").css("cursor", "default"); } ||<

appfbさんのｺﾒﾝﾄ
すみません｡新しく質問を立て直します｡

a-kuma3さんのｺﾒﾝﾄ
>> しかし､再びｱｸﾃｨﾌﾞ化するところでつまずいています｡ bind()を使うのか？ << ｢再びｱｸﾃｨﾌﾞ化する｣のﾀｲﾐﾝｸﾞが分からないのですが､unbind() をなかったことにはできないので､あらためて click() か bind() でｲﾍﾞﾝﾄを処理する関数を登録することになると思います｡

appfbさんのｺﾒﾝﾄ
ｺﾒﾝﾄありがとうございます｡ >> unbind() をなかったことにはできないので << そうですね｡表現がおかしいでした｡あれから頑張ってみましたが､あまりにも経験不足なので問題点がなかなか絞れずにいます｡新しく質問を立てました｡お手隙の時にでも見ていただければ幸いです｡