人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQuery の unbind とhover の質問です。
補足にコードを添付しましたが、以下の問題でつまづいています。

(1)DOM読み込みでアイコン画像をグレーアウト用の画像に変更しクリックを無効化したいのですが、画像は変更されるのですがクリックが無効化されません。何か書き方がおかしいですか?
(2)アクティブ時に css の 『.quizBtn:hover {background-position: 0px -37px;}』 を jquery で組み込みたいのですが、いろいろ調べいろいろ試してみますがなかなか思うように動きません。


実際のコードでは、ボタンのアクティブ&グレーアウトを呼び出す箇所は複数あります。
従いまして、アクティブ&グレーアウトは関数化しました。
ご指導いただければ幸いです。

●質問者: appfb
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

質問者から
<!DOCTYPE html> 
<html lang="ja">
<head>
 <{$content_type|smarty:nodefaults}>
 <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script>
//--- ajax
function nextLikeFunc(){
 btnGrayoutFunc();// ★グレーアウト
 setTimeout(function(){
 var fb_id = '<{$fb_id}>';
 var url = '<{$app_question_url}>';
 $.ajax({
 type: 'post',
 url: 'ajax_like.php',
 data: {fbid:fb_id},
 success: function(data){
 // ★グレーアウトを解除したい
 btnActiveFunc();
 }
 });
 }, 0);
}

//--- ボタンアクティブ&グレーアウト
function btnActiveFunc(){
 $(".likeBtn")
 .css("background", "url(images/likeButton_active.png) no-repeat 0 0")
 .css("cursor", "pointer")
 .unbind("click", false);
}
function btnGrayoutFunc(){
 $(".likeBtn")
 .css("background", "url(images/likeButton_gray.png) no-repeat 0 0")
 .css("cursor", "default")
 .unbind("click");
}

$(function(){
 // グレーアウト
 btnGrayoutFunc();
 // クリック
 $(".likeBtn").on("click", nextLikeFunc);
});
 </script>

 <style type="text/css">
 <!--
.quizBtn {
 display: inline-block;
 background: url(images/quizButton_active.png) no-repeat 0 0;
 width: 160px;
 height: 37px;
 _width: 160px;
 _height: 37px;
 cursor: pointer;
 padding: 0px 0px 0px 0px;
 margin: 0px 0px 1px 0px;
 border: 1px solid #F5F5F5;
}
.quizBtn:hover {
 background-position: 0px -37px;
}
 -->
 </style>
</head>

<body>
 <span class="likeBtn"></span>
 <!--<span class="quizBtn"></span>-->
</body>
</html>

1 ● a-kuma3
●50ポイント

こんな感じになると思います。

<!DOCTYPE html>
<html lang="ja">
<head>
 <{$content_type|smarty:nodefaults}>
 <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script>
//--- ajax
function nextLikeFunc(){
 btnGrayoutFunc();// ★グレーアウト
 setTimeout(function(){
 var fb_id = '<{$fb_id}>';
 var url = '<{$app_question_url}>';
 $.ajax({
 type: 'post',
 url: url, // ★変数 url を指定する
 data: {fbid:fb_id},
 success: function(data){
 console.log("success !");
 // ★グレーアウトを解除する
 btnActiveFunc();
 }
 });
 }, 0);
}

//--- ボタンアクティブ&グレーアウト
function btnActiveFunc(){
 $(".quizBtn")
 // ★nextLikeFunc を bind する
 .bind("click", nextLikeFunc)
 // ★hover 擬似要素が指定できないので、hover メソッドを使う
 .hover(function() {
 $(this).css("background-position", "0px -37px")
 }, function() {
 $(this).css("background-position", "")
 }
 )
 .css("background", "url(images/quizButton_active.png) no-repeat 0 0")
 .css("cursor", "pointer");
}
function btnGrayoutFunc(){
 $(".quizBtn")
 .unbind("click")
 // ★hover の解除は、mouseenter と mouseleave のイベントを unbind
 .unbind("mouseenter")
 .unbind("mouseleave")
 .css("background", "url(images/likeButton_gray.png) no-repeat 0 0")
 .css("cursor", "default");
}

$(function(){
 // グレーアウト
// btnGrayoutFunc(); ★必要ない(と、思う)
 // クリック
// $(".quizBtn").on("click", nextLikeFunc); ★btnActiveFunc に任せる
 btnActiveFunc();
});
 </script>

 <style type="text/css">
 <!--
.quizBtn {
 display: inline-block;
 /* ★もう要らない
 background: url(images/quizButton_active.png) no-repeat 0 0;
 */
 width: 160px;
 height: 37px;
 _width: 160px;
 _height: 37px;
 cursor: pointer;
 padding: 0px 0px 0px 0px;
 margin: 0px 0px 1px 0px;
 border: 1px solid #F5F5F5;
}
/* ★CSS で指定しない
.quizBtn:hover {
 background-position: 0px -37px;
}
 */
 -->
 </style>
</head>

<body>
 <!-- ★ class=quizBtn に統一 -->
 <span class="quizBtn"></span>
 <span class="quizBtn"></span>
</body>
</html>

hover のイベントについては、こちらを参考にしました。

Calling $( selector ).hover( handlerIn, handlerOut ) is shorthand for:

1 $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
http://api.jquery.com/hover/

appfbさんのコメント
ご回答ありがとうございます。 詳細部分のご指摘までとても勉強になります。 今から早速試してみます。

Lhankor_Mhyさんのコメント
いつものことだけど、先を越されてしまいましたので補足だけ。 hoverの方は、こういうやり方もあると思います。 >|javascript| $('.quizBtn').toggleClass('on'); ||< >|css| .on.quizBtn:hover {background-position: 0px -37px;} ||<

appfbさんのコメント
やっとこさできました! なぜかどう頑張っても、span要素のクリックを無効化できませんでした??? 今回、7ccさまから提案されたbutton要素を使用しました。 a-kuma3さまから以前教えてもらったdisabled属性を使い希望通り動作することを確認しました。 hoverは、自分の考えは近いところまで出来ていたですがあと一歩及ばず。 今回hoverの書き方を教えていただいたことにより、すんなりdisabled属性操作も組み込めました。 ありがとうございました。

2 ● 7cc
●50ポイント ベストアンサー

やり方は色々あるのでお好きなのを…

クリックを無効化

  1. "likeBtn"というクラスをつけるくらいなら、素直に button要素を使ってdisabled属性を使えば楽
  2. spanを使いたいなら、もう一つspanを用意して、それぞれのdisplayを入れ替える(結構よく使われる手)

<span class="likeBtn"></span>
<span class="disableBtn" style="dispaly: none"></span>

$(".likeBtn").on("click", function() {
 $(".likeBtn").css("display", "none")
 $(".disableBtn").css("display", "")
})

cssを組み込みたい

  1. toggleClass
  2. stylle disabledを切り替える

回答とは直接関係無い部分

unbindではなくoffを使う。unbindは古いメソッドで、単純にoffを呼び出しているだけなので。


a-kuma3さんのコメント
>> unbindは古いメソッドで、…… << Ouch !

appfbさんのコメント
ご回答ありがとうございます。 希望通り動作することを確認しました! 前、button要素に画像を入れたらすごく不恰好になったのと、最初に見たサンプルがspan要素を使っていたのでムキになっていましたが、cssできれいに形成するサイトを見つけましたので、おっしゃる通りbutton要素のdisabled属性を使うことにしました。 http://tenderfeel.xsrv.jp/css/597/ ありがとうございます。 >> unbindではなくoffを使う。 << ありがとうございます。今後はoffを使用いたします。 toggleClassは何となく解るのですが、今の私には難易度が高いようなのでもう少し先に頑張ってみます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ