Q&A
ありがとうございます、試してみます！
困っていること
if文を使うと、if文の中の物が効かなくなってしまいます。
このhtmlでは、他のjQueryも読み込まれていて、それらでは$マークが使われておらず、下のようにjQueryという表記が使われています。
jQuery("〇〇").click(function(e)){〇〇});
html
1<div class="sample2Area koukai" id="makeImg"> 2 <input type="checkbox" id="sample2check" checked=""> 3 <label for="sample2check"> 4 <div class="koukai_btns"><img class="koukai_btn" src="img/switch_koukai.png" width="234" height="48" alt="公開"><img class="koukai_btn02" src="img/switch_koukai02.png" width="170" height="48" alt="公開"></div> 5 <div class="hikoukai_btns"> 6 <div class="hikoukai_btn"><img src="img/switch_hikoukai.png" width="234" height="48" alt="非公開"></div> 7 <div class="hikoukai_btn02"><img src="img/switch_hikoukai02.png" width="170" height="48" alt="非公開"></div> 8 </div> 9 </label> 10 </div>
css
1.content #main #baseInfo #baseRBottom .baseItem .sample2Area{ 2 margin:auto; 3 width:404px; 4 height:50px; 5 position: relative; 6} 7.content #main #baseInfo #baseRBottom .baseItem .sample2Area img{ 8 margin:0; 9} 10.content #main #baseInfo #baseRBottom .baseItem .sample2Area .koukai_btns{ 11 position: absolute; 12 top:0; 13 left:0; 14 width:234px; 15 height:48px; 16 transition: 0.3s; 17} 18.content #main #baseInfo #baseRBottom .baseItem .sample2Area .koukai_btns .koukai_btn02{ 19 position: absolute; 20 top:0; 21 right:0; 22 margin:0; 23 display: none; 24} 25.content #main #baseInfo #baseRBottom .baseItem .sample2Area .hikoukai_btns{ 26 display: flex; 27}
jQuery
1$(function() { 2 $("#makeImg").click(function(){ 3 if(){ 4 $(this).removeClass('koukai'); 5 $(".koukai_btn02").show(); 6 $(".koukai_btn").hide(); 7 $(".koukai_btns").css('transform','translateX(170px)'); 8 } 9 else{ 10 $(this).addClass('koukai'); 11 $(".koukai_btn02").hide(); 12 $(".koukai_btn").show(); 13 $(".koukai_btns").css('transform','translateX(0)'); 14 15 } 16 }); 17}); 18
ちなみに以下のようにifを使わないと、しっかり効きます。
jQuery
1$(function() { 2 $("#makeImg").click(function(){ 3 $(this).removeClass('koukai'); 4 $(".koukai_btn02").show(); 5 $(".koukai_btn").hide(); 6 $(".koukai_btns").css('transform','translateX(170px)'); 7 }); 8});
すみません！コードを変更しました。困っている内容は変わっていません！
回答3件
0
自己解決
どこかの表記ミスかと思われます。
投稿2020/05/18 10:25
総合スコア50
0
他の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
0
とくに問題なさそうですが、この手の処理はtoggleが有効です
投稿2020/05/18 08:00
総合スコア116724
$(function() {
$("#makeImg").click(function(){
var flg=$(this).hasClass('koukai');
$(this).toggleClass('koukai',!flg);
$(".koukai_btn").toggle(flg);
$(".koukai_btn02").toggle(!flg)
});
});
ありがとうございます。
しかし、送っていただいたコードを書いたのですが、二回目のクリックのときに.koukai_btn02が消えず、koukai_btnが現れません、、
あれ、逆でした？
koikai_btn,btn02のflgの!を逆にしてください
$(".koukai_btn").toggle(!flg);
$(".koukai_btn02").toggle(flg)
逆にすると、どちらの画像も変化なくなってしまいました、、
仕様がよくわかりません
最初ボタンが1,2両方表示、１回クリックで1が表示2が非表示
もう一度クリックで1が非表示2が表示、あとはその繰り返し
チェックボックスはなんのためにあるのでしょうか？
最初０２の方がCSSでdisplay: none;で１回クリックすると０２が消えたままでkoukaiクラスが付き
２回目でkoukaiクラスが外れて０２が表示される
その後はトグルしてますね。画像を用意して無くても分かるようにALTを書き換えてみましたが
そういう動作になってました。
最初の動作だけちょっと変かなと思いました
koukaiクラスが付いているときに０２じゃない方の画像でクラスが外れたら０２になるってことは
０２が非公開ですよね。
チェックボックスにチェックがはいってて ０２が非表示からスタートだから最初は公開状態
だから 最初はkoukaiクラスが付いた状態からスタートしないといけませんね。
そうすればチェックボックスの意味もkoukaiクラスの意味も統一されます。
その線で当方の回答を記述しなおしました。
全部消してから１から書いたらできました！
お騒がせしました、ありがとうございました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/18 10:30
2020/05/18 10:31