質問編集履歴

2

コードの変更

2020/05/18 10:02

投稿

reo_fukkase
reo_fukkase

スコア50

test CHANGED
@@ -1 +1 @@
1
- jQueryのif文の中で、addClassとremoveClassが機能してくれません。
1
+ jQueryのif文の中が機能してくれません。
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  if文を使うと、if文の中の物が効かなくなってしまいます。
4
4
 
5
- このhtmlでは、他のjQueryも読み込まれていて、それらでは$マークが使われておらず、下のようにjQueryという表記が使われています。cssでは、.koukai_btn02にdisplay:none;を指定しています。
5
+ このhtmlでは、他のjQueryも読み込まれていて、それらでは$マークが使われておらず、下のようにjQueryという表記が使われています。
6
6
 
7
7
  ```ここに言語を入力
8
8
 
@@ -12,27 +12,85 @@
12
12
 
13
13
  ```html
14
14
 
15
- <div class="sample2Area" id="makeImg">
15
+ <div class="sample2Area koukai" id="makeImg">
16
16
 
17
17
  <input type="checkbox" id="sample2check" checked="">
18
18
 
19
- <label for="sample2check">
19
+ <label for="sample2check">
20
20
 
21
- <div id="sample2box">
21
+ <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>
22
22
 
23
- <img class="koukai_btn" src="img/switch_koukai.png" alt="公開スイッチ" width="234" height="48">
23
+ <div class="hikoukai_btns">
24
24
 
25
+ <div class="hikoukai_btn"><img src="img/switch_hikoukai.png" width="234" height="48" alt="非公開"></div>
26
+
25
- <img class="koukai_btn02" src="img/switch_koukai02.png" alt="公開スイッチ" width="170" height="48">
27
+ <div class="hikoukai_btn02"><img src="img/switch_hikoukai02.png" width="170" height="48" alt="非公開"></div>
26
28
 
27
29
  </div>
28
30
 
29
31
  </label>
30
32
 
31
- </div>
33
+ </div>
32
34
 
33
35
  ```
34
36
 
37
+ ```css
35
38
 
39
+ .content #main #baseInfo #baseRBottom .baseItem .sample2Area{
40
+
41
+ margin:auto;
42
+
43
+ width:404px;
44
+
45
+ height:50px;
46
+
47
+ position: relative;
48
+
49
+ }
50
+
51
+ .content #main #baseInfo #baseRBottom .baseItem .sample2Area img{
52
+
53
+ margin:0;
54
+
55
+ }
56
+
57
+ .content #main #baseInfo #baseRBottom .baseItem .sample2Area .koukai_btns{
58
+
59
+ position: absolute;
60
+
61
+ top:0;
62
+
63
+ left:0;
64
+
65
+ width:234px;
66
+
67
+ height:48px;
68
+
69
+ transition: 0.3s;
70
+
71
+ }
72
+
73
+ .content #main #baseInfo #baseRBottom .baseItem .sample2Area .koukai_btns .koukai_btn02{
74
+
75
+ position: absolute;
76
+
77
+ top:0;
78
+
79
+ right:0;
80
+
81
+ margin:0;
82
+
83
+ display: none;
84
+
85
+ }
86
+
87
+ .content #main #baseInfo #baseRBottom .baseItem .sample2Area .hikoukai_btns{
88
+
89
+ display: flex;
90
+
91
+ }
92
+
93
+ ```
36
94
 
37
95
  ```jQuery
38
96
 
@@ -40,25 +98,33 @@
40
98
 
41
99
  $("#makeImg").click(function(){
42
100
 
43
- if($(this).hasClass('koukai')){
101
+ if(){
44
102
 
45
- $(this).removeClass('koukai');
103
+ $(this).removeClass('koukai');
46
104
 
47
- $(".koukai_btn").hide();
105
+ $(".koukai_btn02").show();
48
106
 
49
- $(".koukai_btn02").show();
107
+ $(".koukai_btn").hide();
50
108
 
51
- }else{
109
+ $(".koukai_btns").css('transform','translateX(170px)');
52
110
 
53
- $(this).addClass('koukai');
111
+ }
54
112
 
55
- $(".koukai_btn02").hide();
113
+ else{
56
114
 
57
- $(".koukai_btn").show();
115
+ $(this).addClass('koukai');
58
116
 
59
- }
117
+ $(".koukai_btn02").hide();
60
118
 
119
+ $(".koukai_btn").show();
120
+
121
+ $(".koukai_btns").css('transform','translateX(0)');
122
+
123
+
124
+
125
+ }
126
+
61
- });
127
+ });
62
128
 
63
129
  });
64
130
 
@@ -68,7 +134,7 @@
68
134
 
69
135
 
70
136
 
71
- ちなみに以下のようにifを使わないと、しっかりaddClassが効きます。
137
+ ちなみに以下のようにifを使わないと、しっかり効きます。
72
138
 
73
139
  ```jQuery
74
140
 
@@ -76,14 +142,18 @@
76
142
 
77
143
  $("#makeImg").click(function(){
78
144
 
79
- $(this).removeClass('koukai');
145
+ $(this).removeClass('koukai');
80
146
 
81
- $(".koukai_btn").hide();
147
+ $(".koukai_btn02").show();
82
148
 
83
- $(".koukai_btn02").show();
149
+ $(".koukai_btn").hide();
84
150
 
151
+ $(".koukai_btns").css('transform','translateX(170px)');
152
+
85
- });
153
+ });
86
154
 
87
155
  });
88
156
 
89
157
  ```
158
+
159
+ すみません!コードを変更しました。困っている内容は変わっていません!

1

文の追加

2020/05/18 10:02

投稿

reo_fukkase
reo_fukkase

スコア50

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