質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1642閲覧

WordPressのcontact form 7 add confirmの状態によってスタイルを変えたい jQuery動かない

shimon11

総合スコア49

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/09/08 04:53

編集2020/09/09 01:16

前提・実現したいこと

WordPressのcontact form 7 add confirmの状態によってスタイルを変えたいです
hasClassを使ってboxにclassを付加させたいがうまく動かない

該当のソースコード

Javascript

1(function($){ 2 $(function(){ 3 if(!$('.wpcf7-confirm').hasClass('wpcf7c-force-hide')){ 4 $(".box01").addClass("checked"); 5 } 6 if($('.wpcf7-confirm').hasClass('wpcf7c-force-hide')){ 7 $(".box02").addClass("checked"); 8 } 9 if(!$('.wpcf7-submit').hasClass('wpcf7c-force-hide')){ 10 $(".box03").addClass("checked"); 11 } 12 }) 13})(jQuery);

該当のHTML

入力画面

html

1<div class="contact-button-area"> 2<input type="submit" value="内容を確認する" class="wpcf7-form-control wpcf7-confirm wpcf7c-elm-step1 wpcf7c-btn-confirm"> 3<input type="button" value="戻って内容を修正する" class="wpcf7-form-control wpcf7-back wpcf7c-elm-step2 wpcf7c-btn-back wpcf7c-force-hide"> 4<input type="submit" value="送信する" class="wpcf7-form-control wpcf7-submit wpcf7c-elm-step2 wpcf7c-force-hide"><span class="ajax-loader"></span> 5</div>

確認画面

<div class="contact-button-area"> <input type="submit" value="内容を確認する" class="wpcf7-form-control wpcf7-confirm wpcf7c-elm-step1 wpcf7c-btn-confirm wpcf7c-force-hide"> <input type="button" value="戻って内容を修正する" class="wpcf7-form-control wpcf7-back wpcf7c-elm-step2 wpcf7c-btn-back"> <input type="submit" value="送信する" class="wpcf7-form-control wpcf7-submit wpcf7c-elm-step2"><span class="ajax-loader"></span> </div>

発生している問題

1つ目のif分は動いておりbox01にはcheckedというclassが付きます

if(!$('.wpcf7-confirm').hasClass('wpcf7c-force-hide')){ $(".box01").addClass("checked"); }

しかし、2つめの条件になってもclassがつきません

なぜでしょうか?

試したこと

1つ目の条件を終えると2つ目のif文にはプログラムが動かないと考え、1つ目のif文を削除しましたが、それでも2つめのif分は動きません

JQuery自体の知識が浅く間違っている部分があると思うのですが教えていただければ幸いです

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/09/08 13:43

>jQuery動かないbox 何?
shimon11

2020/09/09 01:16

申し訳ございません。 誤字です
CHERRY

2020/09/11 00:03

質問に記載されている jQuery のソースは、どこに記載していますか?
shimon11

2020/09/11 00:50

CHERRYさんありがとうございます headタグの中に <script type="text/javascript" src="https://〇〇.com/wp-content/themes/theme-name/js/common.js"></script> をかいてcommon.jsに記述しています
beginner_t

2020/09/30 04:19

入力画面と確認画面に同じソースが入っていますが、同じものを記載されていますか?
shimon11

2020/09/30 05:15

beginner_tさん ありがとうございます 確認画面では 内容を確認するのボタンにwpcf7c-btn-confirmというclassが付いておりそれを元に条件を加えたいと思っています
beginner_t

2020/09/30 05:39

ああ、すいません。同じボタンの構成で入力部分がなかったので別のソースがないのかの確認でした。クラスの付与のみが違う部分ですね。
guest

回答1

0

ベストアンサー

cssやboxの部分のソースがないので、おおよその回答になりますが、

css

1.checked { 2 color: red; 3}

jquery

1(function($){ 2 $(function(){ 3 if(!$('.wpcf7-confirm').hasClass('wpcf7c-force-hide')){ 4 $(".box01").addClass("checked"); 5 } 6 if($('.wpcf7-confirm').hasClass('wpcf7c-force-hide')){ 7 $(".box02").addClass("checked"); 8 } 9 if(!$('.wpcf7-submit').hasClass('wpcf7c-force-hide')){ 10 $(".box03").addClass("checked"); 11 } 12 }) 13})(jQuery);

html

1<div class="contact-button-area"> 2<input type="submit" value="内容を確認する" class="wpcf7-form-control wpcf7-confirm wpcf7c-elm-step1 wpcf7c-btn-confirm"> 3<input type="button" value="戻って内容を修正する" class="wpcf7-form-control wpcf7-back wpcf7c-elm-step2 wpcf7c-btn-back wpcf7c-force-hide"> 4<input type="submit" value="送信する" class="wpcf7-form-control wpcf7-submit wpcf7c-elm-step2 wpcf7c-force-hide"><span class="ajax-loader"></span> 5</div> 6<div class="box01">test</div> 7<div class="box02">test</div>

結果:box01が赤くなる(クラスがつく)
box02は黒のまま(クラスはつかない)

html

1<div class="contact-button-area"> 2<input type="submit" value="内容を確認する" class="wpcf7-form-control wpcf7-confirm wpcf7c-elm-step1 wpcf7c-btn-confirm wpcf7c-force-hide"> 3<input type="button" value="戻って内容を修正する" class="wpcf7-form-control wpcf7-back wpcf7c-elm-step2 wpcf7c-btn-back"> 4<input type="submit" value="送信する" class="wpcf7-form-control wpcf7-submit wpcf7c-elm-step2"><span class="ajax-loader"></span> 5</div> 6<div class="box01">test</div> 7<div class="box02">test</div>

結果:box02が赤くなる(クラスがつく)
box01は黒のまま(クラスはつかない)

上記の結果からjQueryは動いていると思います。

cssやjqueryの記載場所などほかに原因がないかを確認してください。

投稿2020/09/30 05:49

編集2020/09/30 05:50
beginner_t

総合スコア716

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問