jQueryのif文の中が機能してくれません。

総合スコア50

2020/05/18 10:30

最初にkoukaiクラスが付いた状態からスタートしてなかったので、最初の２回が意図した動作と違って見えて、おかしい・・・　動いてないと思い込まれたのでしょうね。解決してよかったです。

2020/05/18 10:31

ありがとうございます????‍♂️

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

他のjQueryが読み込まれてると言うのが気になりますが、ちゃんと動いてますよ？

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta  charset="UTF-8">
5<title>jQuery TEST</title>
6<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
7<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>-->
8<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>-->
9<style>
10    .koukai_btn02 {
11        display: none;
12    }
13</style>
14</head>
15<body>
16    <div class="sample2Area koukai" id="makeImg">
17        <input type="checkbox" id="sample2check" checked="">
18          <label for="sample2check">
19            <div id="sample2box">
20              <img class="koukai_btn" src="img/switch_koukai.png" alt="公開スイッチ" width="234" height="48">
21              <img class="koukai_btn02" src="img/switch_koukai02.png" alt="公開スイッチ02"  width="170" height="48">
22            </div>
23          </label>
24    </div>
25    <script type="text/javascript">
26        $(function() {
27        $("#makeImg").click(function(){
28            if($(this).hasClass('koukai')){
29                $(this).removeClass('koukai');
30                $(".koukai_btn").hide();
31                $(".koukai_btn02").show();
32            }else{
33                $(this).addClass('koukai');
34                $(".koukai_btn02").hide();
35                $(".koukai_btn").show();
36            }
37        });
38});
39	</script>
40</body>
41</html>

とりあえずVer1系では動きました。Ver2系とVer3系もためしてみましたが、Ver2系は問題なし
Ver3系は表示される側にinline styleが空でエレメントに設定されてました。でも
if文うんぬんは問題にはなってないようです。どのバージョンでもクラスの付け外しはできてました

公開非公開が分かりにくいので画像を用意しなくても分かるようにALTを書き換えてます。
最初の動作がおかしいですね。チェックボックスがONで公開状態の画像のみなのでkoukaiクラスは最初から付いた状態からスタートが正しいですね。これで違和感はなくなりました。

このソースでIE,FireFox,Chrome,Edge全てで問題なく動作するのを確認しました。

それでも動かない場合は、ほかに読み込まれてるソースとの兼ね合いかなぁ。とりあえずどのバージョンのjQueryを使っているのか
ほかに読み込んでいるスクリプトのタグを追記してもらわないとこれ以上は分からないです。

投稿2020/05/18 08:35

編集2020/05/18 10:14

総合スコア501

2020/05/18 10:11

ありがとうございます、試してみます！

2020/05/18 10:24

全部消してから１から書いたらできました！お騒がせしました、ありがとうございました。

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

とくに問題なさそうですが、この手の処理はtoggleが有効です

投稿2020/05/18 08:00

総合スコア114985

2020/05/18 08:00

$(function() { $("#makeImg").click(function(){ var flg=$(this).hasClass('koukai'); $(this).toggleClass('koukai',!flg); $(".koukai_btn").toggle(flg); $(".koukai_btn02").toggle(!flg) }); });

2020/05/18 08:09

ありがとうございます。しかし、送っていただいたコードを書いたのですが、二回目のクリックのときに.koukai_btn02が消えず、koukai_btnが現れません、、

2020/05/18 08:15 編集

あれ、逆でした？ koikai_btn,btn02のflgの!を逆にしてください $(".koukai_btn").toggle(!flg); $(".koukai_btn02").toggle(flg)

2020/05/18 08:32

逆にすると、どちらの画像も変化なくなってしまいました、、

2020/05/18 08:50

仕様がよくわかりません最初ボタンが1,2両方表示、１回クリックで1が表示2が非表示もう一度クリックで1が非表示2が表示、あとはその繰り返しチェックボックスはなんのためにあるのでしょうか？

2020/05/18 09:01

最初０２の方がCSSでdisplay: none;で１回クリックすると０２が消えたままでkoukaiクラスが付き２回目でkoukaiクラスが外れて０２が表示されるその後はトグルしてますね。画像を用意して無くても分かるようにALTを書き換えてみましたがそういう動作になってました。最初の動作だけちょっと変かなと思いました

2020/05/18 09:17

koukaiクラスが付いているときに０２じゃない方の画像でクラスが外れたら０２になるってことは０２が非公開ですよね。チェックボックスにチェックがはいってて　０２が非表示からスタートだから最初は公開状態だから　最初はkoukaiクラスが付いた状態からスタートしないといけませんね。そうすればチェックボックスの意味もkoukaiクラスの意味も統一されます。その線で当方の回答を記述しなおしました。