jQuery の unbind とhover の質問です。

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

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


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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/10/16 11:04:19
  • 終了:2013/10/16 15:27:07
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

7cc回答回数32ベストアンサー獲得回数142013/10/16 12:56:47

ポイント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

a-kuma3回答回数4445ベストアンサー獲得回数18272013/10/16 12:05:20

ポイント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

7cc回答回数32ベストアンサー獲得回数142013/10/16 12:56:47ここでベストアンサー

ポイント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

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

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

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

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

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