【jquery】各々のボタンをクリックするとボタンが切り替わったように見せる実装

Warning: Trying to access array offset on value of type bool in /home/shu1good/in-sec.xyz/public_html/wp-content/plugins/pryc-wp-add-custom-content-to-bottom-of-post/pryc-wp-add-custom-content-to-bottom-of-post.php on line 54

Warning: Trying to access array offset on value of type bool in /home/shu1good/in-sec.xyz/public_html/wp-content/plugins/pryc-wp-add-custom-content-to-bottom-of-post/pryc-wp-add-custom-content-to-bottom-of-post.php on line 59

Warning: Trying to access array offset on value of type bool in /home/shu1good/in-sec.xyz/public_html/wp-content/plugins/pryc-wp-add-custom-content-to-bottom-of-post/pryc-wp-add-custom-content-to-bottom-of-post.php on line 60

どうも、jqueryに最近手を出し始めたエンジニア、しゅういちです。

今日は、自分が学んだことをシェアする意識のもと、jqueryの実装について、お伝えします。

想定読者
・HTML、CSSが少しでもかける人。
・jqueryはどんなことができるのかをまだわかってない人。

では、説明します。

Contents

jqueryって一体なんなのか？

シンプルに答えるならば、ブラウザ側で画面上に動きをつけるスクリプト言語のライブラリ。

と行ってもいまいちピンと来ないと思うので、まずはどんな動きをするのかをみてみて。

Demo

上記のデモは、クリックしたらボタンが押したままになり、他のボタンをクリックすると、押されたボタンが切り替わる、

と言う処理をしています。

検証ツールでみてみることに。

ボタンを押したら、どう言う風にHTMLが変わっているか、以下の画像で示します。
１.下の画像から

2.以下のように変わるんです。

hasclass()を使用する場合

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
    //$(セレクタ).命令〜
    $(".select_care").on("click", function(){
        if(!$(".select_care").hasClass("on")){
            $(this).css("background-image", "url('img/reserve/select_on.png')");
            $("p", this).css("color", "#000");
            $(this).addClass("on");
        }
        else if($(".select_care").hasClass("on")){
            $(".select_care").css("background-image", "url('img/reserve/select_off.png')");
            $("p", ".select_care").css("color", "white");
            $(".select_care").removeClass("on");
            $(this).css("background-image", "url('img/reserve/select_on.png')");
            $("p", this).css("color", "#000");
            $(this).addClass("on");
        }
    });
});
 </script>

「$(“.select_care”).on(“click”, function(){」の箇所で、「.select_care」をクリックした場合に、どのような処理をするのか？をプログラムします。

「$(“.select_care”).hasClass(“on”)」は「.select_care」がタグ内に含まれていclassに「on」の文字列が含まれていることを示しています。

そして「！」がつくことにより、否定の意味になるので、「if(!$(“.select_care”).hasClass(“on”)){」は「.select_care」classに「on」の文字列が入っていない場合と言う意味になります。

$(this).css(“background-image”, “url(‘img/reserve/select_on.png’)”);
$(“p”, this).css(“color”, “#000”);
$(this).addClass(“on”);

上記の３つについては、クリックした「.select_care」classが含まれている箇所のCSSを書き換えています

「else if($(“.select_care”).hasClass(“on”)){」以下に関しては、一度箱を全て元の状態に戻してから他のボタンを選択する処理をしています。

図に表すと以下の通り。