こんにちは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の詳しい記述はこちらをどうぞご覧ください↓
あわせて読みたい
チェックボックス、ラジオボタンの作り方【コーディング 備忘録】
こんにちはrey( @reydesign8376) です チェックボックス、ラジオボタンの作り方をサクサクっとしたためて参りますでは早速〜 チェックボックス、ラジオボタンの要素 チ…
$(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になります。ぜひお役立てください〜
コメント