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

Question

前提・実現したいこと

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

該当のソースコード

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

該当のHTML

入力画面

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

発生している問題

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

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

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

なぜでしょうか？

試したこと

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

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

Comments

[退会済みユーザー]

>jQuery動かないbox
何？

[shimon11]

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

[CHERRY]

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

[shimon11]

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

をかいてcommon.jsに記述しています

[beginner_t]

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

[shimon11]

beginner_tさん
ありがとうございます

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

[beginner_t]

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

Answer 1

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

.checked {
  color: red;
}

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

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

結果：box01が赤くなる（クラスがつく）
box02は黒のまま（クラスはつかない）

<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>
<div class="box01">test</div>
<div class="box02">test</div>

結果：box02が赤くなる（クラスがつく）
box01は黒のまま（クラスはつかない）

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

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