【jQuery 備忘録】クリックイベント クリックするとブロックが表示 する方法

こんにちはrey( @reydesign8376) です

なかなかjQueryって覚えられなくて苦戦している今日この頃です
出来ちゃえばjQueryって動的なのでめっちゃ楽しい

ではこんな感じで、inputにチェックを入れると次のセクションが表示されるというものを作っていきます〜

では早速〜

目次

基本の構文

イベント基本の構文はこんな感じ

$(“セレクター”).イベント(処理の内容);

セレクターで選択した要素にイベントが起こった際に、処理を行います。

セレクターとは

id名、class名・・・.wrapperや.container #itemなどなど
要素名・・・h1要素やp要素、span要素など

ボタンを押すと表示するイベント

実際にクリックイベントを作ってみます。

    <div class="question">
        <div class="wrapper">
            <div class="box"></div>
            <input type="radio" name="group" id="qa_y">
            <label for="qa_y">はい</label>
            <input type="radio" name="group" id="qa_n">
            <label for="qa_n">いいえ</label>
        </div>

        <div class="wrapper2">
            <div class="box"></div>
            <input type="radio" name="group2" id="qa_y2">
            <label for="qa_y2">はい</label>
            <input type="radio" name="group2" id="qa_n2">
            <label for="qa_n2">いいえ</label>
        </div>

        <div class="wrapper3">
            <div class="box"></div>
            <input type="radio" name="group3" id="qa_y3">
            <label for="qa_y3">はい</label>
            <input type="radio" name="group3" id="qa_n3">
            <label for="qa_n3">いいえ</label>
        </div>

        <div class="wrapper4">
            <div class="box"></div>
            <input type="radio" name="group4" id="qa_y4">
            <label for="qa_y4">はい</label>
            <input type="radio" name="group4" id="qa_n4">
            <label for="qa_n4">いいえ</label>
        </div>

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js" async></script>

input typeの詳しい記述はこちらをどうぞご覧ください↓

$(function () {
    $(".wrapper2").hide();
    $("#qa_y,#qa_n").click(function () {
        $(".wrapper2").hide();
        if ($(".wrapper2").css("display") == "none") {
            $(".wrapper2").show();
        }
    });
});

$(function () {
    $(".wrapper3").hide();
    $("#qa_y2,#qa_n2").click(function () {
        $(".wrapper3").hide();
        if ($(".wrapper3").css("display") == "none") {
            $(".wrapper3").show();
        }
    });
});

$(function () {
    $(".wrapper4").hide();
    $("#qa_y3,#qa_n3").click(function () {
        $(".wrapper4").hide();
        if ($(".wrapper4").css("display") == "none") {
            $(".wrapper4").show();
        }
    });
});

詳細を見ていきます

    $(".wrapper2").hide();

最初のブロックは表示しておき、非表示にするのは2番目のブロックになります。
.hide()は非表示メソッドになります。

    $("#qa_y,#qa_n").click(function () {

(“#qa_y,#qa_n”)はinputのradioボタンどちらをクリックしても表示するようにセレクターを複数に設定します

   if ($(".wrapper2").css("display") == "none") {
            $(".wrapper2").show();

if ($(“.wrapper2”)〜 if構文になります。

if(分岐する条件){
条件に合致した場合の処理
}

を記述していきます。

.show()で表示になります。

これでクリックすると表示される jQueryになります。ぜひお役立てください〜

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次