id:appfb
ポイントあり100ptベストアンサーあり
ウェブ制作

jQuery の unbind とhover の質問です。

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

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


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

回答の条件
  • 1人5回まで
  • 登録：
  • 終了：2013/10/16 15:27:07
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
id:appfb

質問者から

appfb2013/10/16 11:36:04 
<!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>
規約違反として通知

ベストアンサー

id:u_7cc No.2

回答回数32ベストアンサー獲得回数14

ポイント50pt

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

クリックを無効化

  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を呼び出しているだけなので。

id:a-kuma3

unbindは古いメソッドで、……

Ouch !

2013/10/16 13:20:28
id:appfb

ご回答ありがとうございます。
希望通り動作することを確認しました！


前、button要素に画像を入れたらすごく不恰好になったのと、最初に見たサンプルがspan要素を使っていたのでムキになっていましたが、cssできれいに形成するサイトを見つけましたので、おっしゃる通りbutton要素のdisabled属性を使うことにしました。
http://tenderfeel.xsrv.jp/css/597/
ありがとうございます。

unbindではなくoffを使う。

ありがとうございます。今後はoffを使用いたします。

toggleClassは何となく解るのですが、今の私には難易度が高いようなのでもう少し先に頑張ってみます。

2013/10/16 15:24:39

その他の回答（1件）

id:appfb

質問者から

appfb2013/10/16 12:04:54

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

規約違反として通知
id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154

ポイント50pt

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

<!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>

  • btnActiveFunc()
    • unbind を、bind で nextLikeFunc を click イベントに結び付ける
    • hover 擬似要素を指定できないので、hover メソッドで処理を書く
  • btnGrayoutFunc
    • hover の解除は mouseenter と mouseleave のイベントを unbind する
  • ページをロードしたときの処理
    • nextLikeFunc を登録するのではなく、btnActiveFunc に任せる
    • btnGrayoutFunc を呼ぶ必要はない
  • その他
    • CSS での、quizBtn:hover の指定を削除
    • class=quizBtn のスタイルでは、background を指定する必要がなくなった
  • 本筋とは関係なさそうなところ（サンプルコードの書き間違い？）
    • $.ajax の url 指定で、変数 url を使う
    • ボタンのクラスを quizBtn に統一（関数名だけ、nextLikeFunc のまま）

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

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

1 $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
http://api.jquery.com/hover/
他1件のコメントを見る
id:Lhankor_Mhy

いつものことだけど、先を越されてしまいましたので補足だけ。
　
hoverの方は、こういうやり方もあると思います。

$('.quizBtn').toggleClass('on');

.on.quizBtn:hover {background-position: 0px -37px;}
2013/10/16 13:12:59
id:appfb

やっとこさできました！
なぜかどう頑張っても、span要素のクリックを無効化できませんでした？？？

今回、7ccさまから提案されたbutton要素を使用しました。
a-kuma3さまから以前教えてもらったdisabled属性を使い希望通り動作することを確認しました。

hoverは、自分の考えは近いところまで出来ていたですがあと一歩及ばず。
今回hoverの書き方を教えていただいたことにより、すんなりdisabled属性操作も組み込めました。
ありがとうございました。

2013/10/16 15:24:00
id:u_7cc No.2

回答回数32ベストアンサー獲得回数14ここでベストアンサー

ポイント50pt

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

クリックを無効化

  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を呼び出しているだけなので。

id:a-kuma3

unbindは古いメソッドで、……

Ouch !

2013/10/16 13:20:28
id:appfb

ご回答ありがとうございます。
希望通り動作することを確認しました！


前、button要素に画像を入れたらすごく不恰好になったのと、最初に見たサンプルがspan要素を使っていたのでムキになっていましたが、cssできれいに形成するサイトを見つけましたので、おっしゃる通りbutton要素のdisabled属性を使うことにしました。
http://tenderfeel.xsrv.jp/css/597/
ありがとうございます。

unbindではなくoffを使う。

ありがとうございます。今後はoffを使用いたします。

toggleClassは何となく解るのですが、今の私には難易度が高いようなのでもう少し先に頑張ってみます。

2013/10/16 15:24:39

コメント（0件)

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

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

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

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

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ