【解放区在住氷翠 緑の閃光】氷翠のお気楽日記

ボタンの変化。

2017-10-14 18:56

javascript > Jquery > 開発

あ、どうも、氷翠でっす。

HTMLで、「<button>」タグでボタンを作成。デザインは単純なもので構成しています。
今回はスマホメインの考えなので、それに関連するJavascriptを組もうとしていました。

目的は、タップしたら特定のブロックを縦にスライドするように表示させる。それと同時にボタンに表記していた文字を変更させるというもの。
一つ一つを考えると、非常に単純なんだけど、これを同時にやるとしたら、話は変わってくる。

Jqueryを長年使っていますが、知らない関数もあり、使ったことがないものもあります。もしくは、使い方を間違っていた。
間違っていてもHTML的にはエラーにはならずにそのまま動いていたり。

ということで、このコード!

$(function(){
    $("section").each(function(i, elem){
        var v = $(this).children(".btn").children("button").get(0);
        $.data(v, "open", "false");
    });
});
$(document).on("touchend", "section .btn button", function() {
    var obj = $(this);
    $(this).parent().prev(".answer").slideToggle(
        function() {
            var obj2 = obj.get(0);
            if(obj.data("open") === "false") {
                obj.text("閉じる");
                $.data(obj2, "open", "true");
            } else {
                obj.text("開く");
                $.data(obj2, "open", "false");
            }
        }
    );
});

上の方ではボタンに対して「まだブロックは開いてないよ」っていうフラグをつけています。
HTML的には「section」タグが複数あって、それぞれにボタンが付いている。
そのボタンがタップされると、「.answer」というクラスのブロックが開く。
そんな仕様です。

下の方では「touchend」のイベントを利用しています。
他の方法でもいいのですが。。。今回はこれでいきます。

まず、中ぐらいにあるtoggleの処理ですが、「toggle」と「slidetoggle」では引数の設定の仕方が違うので、注意しなくてはいけません。「toggle」では2つのfunctionを定義する必要がありますが、「slidetoggle」は一つです。つまり後者はコールバックの意味を持っている。
そして、ここからが問題。

フラグをつけたりしているのが、jqueryの関数の「data」というやつ。
これが氷翠は間違った使い方をしていたようだ。

var obj2 = obj.get(0);

これが重要。

data関数はオブジェクトに対してはつけることが出来ないようだ。なので、上記の方法であくまでもタグを取得して、これに対してdata関数を使ってあげることで、フラグもしくは値を持たせてあげることができようだ。

これらを組み合わせることで、ブラウザに負担なく一つのオブジェクトに対して2つの動きをもたせることができました。

ほんと、javascriptは苦手で…orz

コメントを残す

メールアドレスが公開されることはありません。