jQuery 3 の show / hide

前回 jQuery 3 の話をしましたが、その際に show / hide の例を挙げました。
今回は実際にどのように変化があるのかを試したいと思います。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                $('#show').click( function() {
                    $('#disp_area1').show();
                    $('#disp_area2').removeClass('disp_hide');
                });
                $('#hide').click( function() {
                    $('#disp_area1').hide();
                    $('#disp_area2').addClass('disp_hide');
                });

            });


        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 10px;
            }

            .disp_area {
                width            : 300px;
                height           : 300px;
                float            : left;
            }

            #disp_area1 {
                width            : 250px;
                height           : 250px;
                background-color : #ff0000;
                display          : none;
            }

            #disp_area2 {
                width            : 250px;
                height           : 250px;
                background-color : #0000ff;
            }

            .disp_hide {
                display          : none;
            }

        --></style>

    </head>
    <body>
        <div id="button_area">
            <button id="show">Show</button>
            <button id="hide">Hide</button>
        </div>
        <div id="main_area">
            <div class="disp_area">
                <h1>Ver. Old</h1>
                <div id="disp_area1">Sample Text</div>
            </div>
            <div class="disp_area">
                <h1>Ver. 3</h1>
                <div id="disp_area2" class="disp_hide">Sample Text</div>
            </div>
        </div>

    </body>
</html>

sample

sample の「show」「hide」を click すると表示されている領域が表示され・・・ますね。
・・・表示されますね。想定していた動きと異なります。
どうも sample が良くないようですね(笑)

jQuery 3 では以下の動きにあ変わるようです。
 「show」 display の style を削除するのみ
 「hide」 display に style=”none” を追加するのみ

そのため、show / hide を含み、fadeIn, sadeOut, slideDown, slideUp の処理が
正常に動かなくなることがあるそうです。

そのため、jQuery 3 を使用して初期を非表示をする場合には addClass, removeClass
にて表示を切り替える必要があるようです。

とりあえずは既存のものでなければとくには問題がないのでしょうか(笑)
う~ん、正直よくわかりませんが、取り立てて恐れる必要はないようですね。
今後は jQuery 3 も選定の範囲に入れてもよさそうですね。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 1 人中 1 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です