<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>花火アニメーション</title>
<style>
.display_none {
display: none;
}
</style>
</head>
<body>
<p>
以下のコードでjs-toggle-displayを取得し(複数あっても対応できるように)、
js-toggle-display-radioのラジオボタンのcheckedがある要素のdata-displayのクラスを持つもののdisplay_noneクラスを削除し、
checkedがない場合はdisplay_noneクラスはついたままにしてクリックするたびに表示がかわるようにjqueryで書いてほしい
</p>
<div class="js-toggle-display">
<div class="js-toggle-display-radio">
<label tabindex="0"
><input
type="radio"
name="radio"
data-display="js-toggle-display1"
checked
/>
<span>合計</span>
</label>
<label tabindex="0"
><input type="radio" name="radio" data-display="js-toggle-display2" />
<span>月別</span>
</label>
</div>
<div class="js-toggle-display1">合計エリア</div>
<div class="js-toggle-display2">月別エリア</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
// 全ての .js-toggle-display を取得してループ処理
document.querySelectorAll(".js-toggle-display").forEach((container) => {
// 初期化:checkedのdata-displayに対応するエリアを表示
updateDisplay(container);
// ラジオボタンのクリックイベント設定
container
.querySelectorAll('.js-toggle-display-radio input[type="radio"]')
.forEach((radio) => {
radio.addEventListener("change", () => updateDisplay(container));
});
});
// 表示を更新する関数
function updateDisplay(container) {
// 全ての表示エリアを非表示にするが、.js-toggle-display-radioは対象外
container
.querySelectorAll(".js-toggle-display1, .js-toggle-display2")
.forEach((element) => {
element.classList.add("display_none");
});
// チェックされているinputのdata-display属性に対応するエリアのdisplay_noneクラスを削除
const checkedInput = container.querySelector(
'.js-toggle-display-radio input[type="radio"]:checked'
);
if (checkedInput) {
const displayClass = checkedInput.getAttribute("data-display");
const displayElement = container.querySelector(`.${displayClass}`);
if (displayElement) {
displayElement.classList.remove("display_none");
}
}
}
});
</script>
</body>
</html>
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme