親タグに特定のクラスが付与された時、子タグの特定のクラスを削除したい

bodyに.modal-openが付与された際に、全てのsectionに元々付与されている.hogeを削除し、
また.modal-openが消えたら.hogeを復活させる、ということをしたいです。
下記のように書いたのですが、動きませんでした。
モーダル表示につきましては、modaalを使用しています。

書き方をご存知の方がいらっしゃいましたら、ご教授いただけますと幸いです。
よろしくお願いいたします。

html
1<body>//.siteをクリックでbodyに.modal-openを付与
2　　 <a class="site" data-toggle="modal" data-target="#Modal">オープン</a>
3    <section class="hoge"></section>
4    <section class="hoge"></section>
5    <section class="hoge"></section>
6</body>

javascript
1if($('.modal-open').length) {
2        $('section').removeClass('hoge');
3        }

追記

いただいた質問をもとに修正いたしました。具体的な内容が不足しており申し訳ありません。

yambejp

2020/07/16 08:23

なにをトリガーにbodyに.modal-openが付与されるのでしょうか？そのイベントに.hogeを外す処理はかけないのでしょうか？

yambejp

2020/07/16 09:05

アンカークリックで.modal-openをつけるのはわかりましたが .modal-openは何をトリガーに消えるのですか？

行動規範の内容に同意します

回答2件

ベストアンサー

ページを開いたタイミングでbodyのclassチェックが実行するなら下記で動くと思います。

JavaScript
1if($('.modal-open').length) {
2	if($('section').hasClass('hoge')){
3		$('section').removeClass('hoge');
4	}else{
5		$('section').addClass('hoge');
6	}
7}

modal-openが動的に付与される場合は、modal-openを付与するJSに組み込んで調整してください。

投稿2020/07/16 08:28

3omi0

総合スコア29

退会済みユーザー

2020/07/16 09:14

.modal-openクラスの他に別のクラスを付与するjsを自分で書いていたため、その記述にこちらのコードを組み込んだらうまく行きました。（気づけば良かったです...）ありがとうございました！

行動規範の内容に同意します

javascript
1document.querySelectorAll('.modal-open .hoge').forEach(x=>{
2  x.classList.remove('hoge');
3});

投稿2020/07/16 08:28

yambejp

総合スコア116724

yambejp

2020/07/16 08:53

トリガーがアンカーのクリック <body> 　　 <a class="site" data-toggle="modal" data-target="#Modal">オープン</a> <section class="hoge"></section> <section class="hoge"></section> <section class="hoge"></section> </body> <script> document.querySelectorAll('.site').forEach(x=>{ x.addEventListener('click',e=>{ document.querySelector('body').classList.add('modal-open'); document.querySelectorAll('.modal-open .hoge').forEach(x=>{ x.classList.remove('hoge'); }); }); }); </script>

行動規範の内容に同意します

あなたの回答