質問するログイン新規登録

質問編集履歴

2

コードの変更

2020/05/18 10:02

投稿

reo_fukkase
reo_fukkase

スコア50

title CHANGED
@@ -1,1 +1,1 @@
1
- jQueryのif文の中で、addClassとremoveClassが機能してくれません。
1
+ jQueryのif文の中が機能してくれません。
body CHANGED
@@ -1,45 +1,80 @@
1
1
  ### 困っていること
2
2
  if文を使うと、if文の中の物が効かなくなってしまいます。
3
- このhtmlでは、他のjQueryも読み込まれていて、それらでは$マークが使われておらず、下のようにjQueryという表記が使われています。cssでは、.koukai_btn02にdisplay:none;を指定しています。
3
+ このhtmlでは、他のjQueryも読み込まれていて、それらでは$マークが使われておらず、下のようにjQueryという表記が使われています。
4
4
  ```ここに言語を入力
5
5
  jQuery("〇〇").click(function(e)){〇〇});
6
6
  ```
7
7
  ```html
8
- <div class="sample2Area" id="makeImg">
8
+ <div class="sample2Area koukai" id="makeImg">
9
9
  <input type="checkbox" id="sample2check" checked="">
10
- <label for="sample2check">
11
- <div id="sample2box">
12
- <img class="koukai_btn" src="img/switch_koukai.png" alt="公開スイッチ" width="234" height="48">
13
- <img class="koukai_btn02" src="img/switch_koukai02.png" alt="公開スイッチ" width="170" height="48">
10
+ <label for="sample2check">
11
+ <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>
12
+ <div class="hikoukai_btns">
13
+ <div class="hikoukai_btn"><img src="img/switch_hikoukai.png" width="234" height="48" alt="非公開"></div>
14
+ <div class="hikoukai_btn02"><img src="img/switch_hikoukai02.png" width="170" height="48" alt="非公開"></div>
14
15
  </div>
15
16
  </label>
16
- </div>
17
+ </div>
17
18
  ```
18
-
19
+ ```css
20
+ .content #main #baseInfo #baseRBottom .baseItem .sample2Area{
21
+ margin:auto;
22
+ width:404px;
23
+ height:50px;
24
+ position: relative;
25
+ }
26
+ .content #main #baseInfo #baseRBottom .baseItem .sample2Area img{
27
+ margin:0;
28
+ }
29
+ .content #main #baseInfo #baseRBottom .baseItem .sample2Area .koukai_btns{
30
+ position: absolute;
31
+ top:0;
32
+ left:0;
33
+ width:234px;
34
+ height:48px;
35
+ transition: 0.3s;
36
+ }
37
+ .content #main #baseInfo #baseRBottom .baseItem .sample2Area .koukai_btns .koukai_btn02{
38
+ position: absolute;
39
+ top:0;
40
+ right:0;
41
+ margin:0;
42
+ display: none;
43
+ }
44
+ .content #main #baseInfo #baseRBottom .baseItem .sample2Area .hikoukai_btns{
45
+ display: flex;
46
+ }
47
+ ```
19
48
  ```jQuery
20
49
  $(function() {
21
50
  $("#makeImg").click(function(){
22
- if($(this).hasClass('koukai')){
51
+ if(){
23
- $(this).removeClass('koukai');
52
+ $(this).removeClass('koukai');
53
+ $(".koukai_btn02").show();
24
- $(".koukai_btn").hide();
54
+ $(".koukai_btn").hide();
25
- $(".koukai_btn02").show();
55
+ $(".koukai_btns").css('transform','translateX(170px)');
56
+ }
26
- }else{
57
+ else{
27
- $(this).addClass('koukai');
58
+ $(this).addClass('koukai');
28
- $(".koukai_btn02").hide();
59
+ $(".koukai_btn02").hide();
29
- $(".koukai_btn").show();
60
+ $(".koukai_btn").show();
61
+ $(".koukai_btns").css('transform','translateX(0)');
62
+
30
- }
63
+ }
31
- });
64
+ });
32
65
  });
33
66
 
34
67
  ```
35
68
 
36
- ちなみに以下のようにifを使わないと、しっかりaddClassが効きます。
69
+ ちなみに以下のようにifを使わないと、しっかり効きます。
37
70
  ```jQuery
38
71
  $(function() {
39
72
  $("#makeImg").click(function(){
40
- $(this).removeClass('koukai');
73
+ $(this).removeClass('koukai');
74
+ $(".koukai_btn02").show();
41
- $(".koukai_btn").hide();
75
+ $(".koukai_btn").hide();
42
- $(".koukai_btn02").show();
76
+ $(".koukai_btns").css('transform','translateX(170px)');
43
- });
77
+ });
44
78
  });
45
- ```
79
+ ```
80
+ すみません!コードを変更しました。困っている内容は変わっていません!

1

文の追加

2020/05/18 10:02

投稿

reo_fukkase
reo_fukkase

スコア50

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 困っていること
2
2
  if文を使うと、if文の中の物が効かなくなってしまいます。
3
- このhtmlでは、他のjQueryも読み込まれていて、それらでは$マークが使われておらず、下のようにjQueryという表記が使われています。
3
+ このhtmlでは、他のjQueryも読み込まれていて、それらでは$マークが使われておらず、下のようにjQueryという表記が使われています。cssでは、.koukai_btn02にdisplay:none;を指定しています。
4
4
  ```ここに言語を入力
5
5
  jQuery("〇〇").click(function(e)){〇〇});
6
6
  ```