teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問ブログ機能にjQueryとjQueryCookieを使用し複数の文字を変換したいです

編集履歴

質問編集履歴

6

2021/10/08 07:35

投稿

natti.nf
natti.nf

スコア1

test CHANGED
File without changes
test CHANGED
@@ -20,194 +20,196 @@
20
20
 
21
21
  上記の様に変換設定しても全て10時・10時・10時と変換されます。
22
22
 
23
- ```if($.cookie("dreamname")){
23
+
24
+
25
+ ### 該当のソースコード
26
+
27
+
28
+
29
+ テンプレート作者様がブログ上部表示に入力されたソースコード。
30
+
31
+ <!--名前変換用フォームここから--><!--formで囲う必要はありません--> <!--入力--> <input type="text" name="text" id="NameInput" /> <!--登録ボタン--> <input type="button" value="名前を保存する" id="NameChanger" /> <!--削除ボタン--> <input type="button" value="削除" id="reset" /><!--名前変換用フォームここまで--><!--表示サンプルここから--><!--class名"dname"の要素が置き換わります--> <div style="margin:20px 0;"> <span class="dname">デフォルト</span> </div><!--表示サンプルここまで-->
32
+
33
+ ↑コードにしましたら表示されませんでしたので、文字にさせていただきます。
34
+
35
+
36
+
37
+ HEAD
38
+
39
+ ```<!--名前変換用HEADここから-->
40
+
41
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
42
+
43
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
44
+
45
+ <script type="text/javascript">
46
+
47
+ $(function(){
48
+
49
+ //Cookie呼び出し
50
+
51
+ if($.cookie("dreamname")){
52
+
53
+ $("span.dname").text($.cookie("dreamname"));
54
+
55
+ }
56
+
57
+ //Cookie保存(7日間)
58
+
59
+ $("#NameChanger").click(function(){
60
+
61
+ $.cookie("dreamname",$("#NameInput").val(),{ expires: 7 });
62
+
63
+ location.reload();
64
+
65
+ })
66
+
67
+ //Cookie削除
68
+
69
+ $("#reset").click(function(){
70
+
71
+ $.removeCookie("dreamname");
72
+
73
+ location.reload();
74
+
75
+ })
76
+
77
+ })
78
+
79
+ </script>
80
+
81
+ <!--名前変換用HEADここまで-->
82
+
83
+ コード
84
+
85
+ ```
86
+
87
+ 使い方
88
+
89
+ 1.このテンプレートを使う（必要に応じてカスタマイズして下さい）。
90
+
91
+ 2.記事の中で <code style="background:#DDD;">&lt;span class=&quot;dname&quot;&gt;デフォルト名&lt;/span&gt;</code> を使う。
92
+
93
+ これだけで入力したデータが <code style="background:#DDD;">&lt;span class=&quot;dname&quot;&gt;デフォルト名&lt;/span&gt;</code> と置き換わります。</div>
94
+
95
+
96
+
97
+ ### 試したこと
98
+
99
+
100
+
101
+ 教えていただいたjs-cookieへ変え、複数の設定をしたいのですが上手くいきません。
102
+
103
+ 調べて出てくるCookieの書き方と違うものが多いのですが、書き方が違うのでしょうか？
104
+
105
+ ```<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
106
+
107
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
108
+
109
+
110
+
111
+ <script type="text/javascript">
112
+
113
+ $(function(){
114
+
115
+ //Cookie呼び出し
116
+
117
+ if($.cookie("dreamname")){
24
118
 
25
119
  $("span.dname").text($.cookie("dreamname"));
26
120
 
27
121
  }
28
122
 
29
- コード
30
-
31
- ```とは、どういう意味を持っているのでしょうか？調べてもヒットせず気になっています。
32
-
33
-
34
-
35
- ### 該当のソースコード
36
-
37
-
38
-
39
- テンプレート作者様がブログ上部表示に入力されたソースコード。
40
-
41
- <!--名前変換用フォームここから--><!--formで囲う必要はありません--> <!--入力--> <input type="text" name="text" id="NameInput" /> <!--登録ボタン--> <input type="button" value="名前を保存する" id="NameChanger" /> <!--削除ボタン--> <input type="button" value="削除" id="reset" /><!--名前変換用フォームここまで--><!--表示サンプルここから--><!--class名"dname"の要素が置き換わります--> <div style="margin:20px 0;"> <span class="dname">デフォルト</span> </div><!--表示サンプルここまで-->
42
-
43
- ↑コードにしましたら表示されませんでしたので、文字にさせていただきます。
44
-
45
-
46
-
47
- HEAD
48
-
49
- ```<!--名前変換用HEADここから-->
50
-
51
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
52
-
53
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
123
+ //Cookie保存(7日間)
124
+
125
+ $("#NameChanger").click(function(){
126
+
127
+ $.cookie("dreamname",$("#NameInput").val(),{ expires: 7 });
128
+
129
+ location.reload();
130
+
131
+ })
132
+
133
+ $("#NameChanger").click(function(){
134
+
135
+ $.cookie("dreamname2",$("#NameInput").val(),{ expires: 7 });
136
+
137
+ location.reload();
138
+
139
+ })
140
+
141
+ //Cookie削除
142
+
143
+ $("#reset").click(function(){
144
+
145
+ $.removeCookie("dreamname");
146
+
147
+ location.reload();
148
+
149
+ })
150
+
151
+ })
152
+
153
+ </script>
154
+
155
+
156
+
157
+ コード
158
+
159
+ ```
160
+
161
+
162
+
163
+ 似た事が出来るタグを試してみましたが、こちらでは私の使用するブログ機能では変換出来ませんでした。
164
+
165
+ ```<form name="NameChanger">
166
+
167
+ 午前中<input name="ChosenName1" type="text" placeholder="午前中">
168
+
169
+ 昼<input name="ChosenName2" type="text" placeholder="昼">
170
+
171
+
172
+
173
+ <input type="button" value="決定" onclick="ChangeName()">&emsp;<input type="button" value="リセット" onclick="PgNew()">
174
+
175
+ </form>
176
+
177
+ </div>
178
+
179
+
54
180
 
55
181
  <script type="text/javascript">
56
182
 
183
+ var name1 = "午前中";
184
+
185
+ var name2 = "昼";
186
+
187
+
188
+
57
- $(function(){
189
+ function ChangeName(){
58
-
59
- //Cookie呼び出し
190
+
60
-
61
- if($.cookie("dreamname")){
62
-
63
- $("span.dname").text($.cookie("dreamname"));
191
+ var ChangedName1 = document.NameChanger.ChosenName1.value;
192
+
193
+ var ChangedName2 = document.NameChanger.ChosenName2.value;
194
+
195
+
196
+
197
+ document.getElementById("OriginalStory").innerHTML = document.getElementById("OriginalStory").innerHTML.split(name1).join(ChangedName1).split(name2).join(ChangedName2);
198
+
199
+ return;
64
200
 
65
201
  }
66
202
 
203
+
204
+
67
- //Cookie保存(7日間)
205
+ function PgNew(){
68
-
69
- $("#NameChanger").click(function(){
206
+
70
-
71
- $.cookie("dreamname",$("#NameInput").val(),{ expires: 7 });
72
-
73
- location.reload();
207
+ window.location.reload();
74
-
208
+
75
- })
209
+ }
76
-
77
- //Cookie削除
78
-
79
- $("#reset").click(function(){
80
-
81
- $.removeCookie("dreamname");
82
-
83
- location.reload();
84
-
85
- })
86
-
87
- })
88
210
 
89
211
  </script>
90
212
 
91
- <!--名前変換用HEADここまで-->
92
-
93
- コード
94
-
95
- ```
96
-
97
- 使い方
98
-
99
- 1.このテンプレートを使う（必要に応じてカスタマイズして下さい）。
100
-
101
- 2.記事の中で <code style="background:#DDD;">&lt;span class=&quot;dname&quot;&gt;デフォルト名&lt;/span&gt;</code> を使う。
102
-
103
- これだけで入力したデータが <code style="background:#DDD;">&lt;span class=&quot;dname&quot;&gt;デフォルト名&lt;/span&gt;</code> と置き換わります。</div>
104
-
105
-
106
-
107
- ### 試したこと
108
-
109
-
110
-
111
- 教えていただいたjs-cookieへ変えました。
112
-
113
- ```<script src="https://code.jquery.com/jquery-3.5.1.min.js”></script>
114
-
115
- <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js”></script>
116
-
117
- <script type="text/javascript">
118
-
119
- $(function(){
120
-
121
- //Cookie呼び出し
122
-
123
- if($.cookie("dreamname")){
124
-
125
- $("span.dname").text($.cookie("dreamname"));
126
-
127
- }
128
-
129
- //Cookie保存(7日間)
130
-
131
- $("#NameChanger").click(function(){
132
-
133
- $.cookie("dreamname",$("#NameInput").val(),{ expires: 7 });
134
-
135
- location.reload();
136
-
137
- })
138
-
139
- //Cookie削除
140
-
141
- $("#reset").click(function(){
142
-
143
- $.removeCookie("dreamname");
144
-
145
- location.reload();
146
-
147
- })
148
-
149
- })
150
-
151
- </script>
152
-
153
-
154
-
155
- コード
156
-
157
- ```
158
-
159
-
160
-
161
- 似た事が出来るタグを試してみましたが、こちらでは私の使用するブログ機能では変換出来ませんでした。
162
-
163
- ```<form name="NameChanger">
164
-
165
- 午前中<input name="ChosenName1" type="text" placeholder="午前中">
166
-
167
- 昼<input name="ChosenName2" type="text" placeholder="昼">
168
-
169
-
170
-
171
- <input type="button" value="決定" onclick="ChangeName()">&emsp;<input type="button" value="リセット" onclick="PgNew()">
172
-
173
- </form>
174
-
175
- </div>
176
-
177
-
178
-
179
- <script type="text/javascript">
180
-
181
- var name1 = "午前中";
182
-
183
- var name2 = "昼";
184
-
185
-
186
-
187
- function ChangeName(){
188
-
189
- var ChangedName1 = document.NameChanger.ChosenName1.value;
190
-
191
- var ChangedName2 = document.NameChanger.ChosenName2.value;
192
-
193
-
194
-
195
- document.getElementById("OriginalStory").innerHTML = document.getElementById("OriginalStory").innerHTML.split(name1).join(ChangedName1).split(name2).join(ChangedName2);
196
-
197
- return;
198
-
199
- }
200
-
201
-
202
-
203
- function PgNew(){
204
-
205
- window.location.reload();
206
-
207
- }
208
-
209
- </script>
210
-
211
213
  コード
212
214
 
213
215
  ```

5

2021/10/08 07:35

投稿

natti.nf
natti.nf

スコア1

test CHANGED
File without changes
test CHANGED
@@ -20,6 +20,16 @@
20
20
 
21
21
  上記の様に変換設定しても全て10時・10時・10時と変換されます。
22
22
 
23
+ ```if($.cookie("dreamname")){
24
+
25
+ $("span.dname").text($.cookie("dreamname"));
26
+
27
+ }
28
+
29
+ コード
30
+
31
+ ```とは、どういう意味を持っているのでしょうか？調べてもヒットせず気になっています。
32
+
23
33
 
24
34
 
25
35
  ### 該当のソースコード

4

2021/10/07 15:27

投稿

natti.nf
natti.nf

スコア1

test CHANGED
File without changes
test CHANGED
@@ -98,7 +98,7 @@
98
98
 
99
99
 
100
100
 
101
- 教えていただいたjs-cookieを調べて変えてみましたが、どう変えていいか分からず変換出来ずデフォルトのままになってしまいます。
101
+ 教えていただいたjs-cookieへ変えました。
102
102
 
103
103
  ```<script src="https://code.jquery.com/jquery-3.5.1.min.js”></script>
104
104
 

3

2021/10/07 15:00

投稿

natti.nf
natti.nf

スコア1

test CHANGED
File without changes
test CHANGED
@@ -98,6 +98,8 @@
98
98
 
99
99
 
100
100
 
101
+ 教えていただいたjs-cookieを調べて変えてみましたが、どう変えていいか分からず変換出来ずデフォルトのままになってしまいます。
102
+
101
103
  ```<script src="https://code.jquery.com/jquery-3.5.1.min.js”></script>
102
104
 
103
105
  <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js”></script>
@@ -144,9 +146,9 @@
144
146
 
145
147
  ```
146
148
 
149
+
150
+
147
- 教えていただいたjs-cookieを調べて変えてみましたが、どう変えていいか分からず変換出来ずデフォルトのままになってしまいます。
151
+ 似た事が出来るタグを試してみましたが、こちらでは私の使用するブログ機能では変換出来ませんでした。
148
-
149
-
150
152
 
151
153
  ```<form name="NameChanger">
152
154
 
@@ -200,8 +202,6 @@
200
202
 
201
203
  ```
202
204
 
203
- 似た事が出来るタグを試してみましたが、こちらでは私の使用するブログ機能では変換出来ませんでした。
204
-
205
205
 
206
206
 
207
207
  ### 補足情報（FW/ツールのバージョンなど）

2

2021/10/07 09:33

投稿

natti.nf
natti.nf

スコア1

test CHANGED
File without changes
test CHANGED
@@ -98,9 +98,9 @@
98
98
 
99
99
 
100
100
 
101
- ```<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
101
+ ```<script src="https://code.jquery.com/jquery-3.5.1.min.js”></script>
102
-
102
+
103
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
103
+ <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js”></script>
104
104
 
105
105
  <script type="text/javascript">
106
106
 
@@ -108,21 +108,17 @@
108
108
 
109
109
  //Cookie呼び出し
110
110
 
111
- if($.cookie("dreamname"))
112
-
113
- if($.cookie("dreamname2")){
111
+ if($.cookie("dreamname")){
114
112
 
115
113
  $("span.dname").text($.cookie("dreamname"));
116
114
 
117
- $("span.dname2").text($.cookie("dreamname2"));
118
-
119
115
  }
120
116
 
121
117
  //Cookie保存(7日間)
122
118
 
123
119
  $("#NameChanger").click(function(){
124
120
 
125
- $.cookie("dreamname","dreamname2",$("#NameInput").val(),{ expires: 7 });
121
+ $.cookie("dreamname",$("#NameInput").val(),{ expires: 7 });
126
122
 
127
123
  location.reload();
128
124
 
@@ -132,21 +128,23 @@
132
128
 
133
129
  $("#reset").click(function(){
134
130
 
135
- $.removeCookie("dreamname""dreamname2");
131
+ $.removeCookie("dreamname");
136
132
 
137
133
  location.reload();
138
134
 
139
- })
135
+ })
140
136
 
141
137
  })
142
138
 
143
139
  </script>
144
140
 
141
+
142
+
145
- コード
143
+ コード
146
-
144
+
147
- ```
145
+ ```
148
-
146
+
149
- 変換出来ず、全てデフォルトのままでした。
147
+ 教えていただいたjs-cookieを調べて変えてみましたが、どう変えていいか分からず変換出来ずデフォルトのままになってしまいます。
150
148
 
151
149
 
152
150
 

1

2021/10/07 09:08

投稿

natti.nf
natti.nf

スコア1

test CHANGED
File without changes
test CHANGED
@@ -28,11 +28,11 @@
28
28
 
29
29
  テンプレート作者様がブログ上部表示に入力されたソースコード。
30
30
 
31
- ```<!--名前変換用フォームここから--><!--formで囲う必要はありません--> <!--入力--> <input type="text" name="text" id="NameInput" /> <!--登録ボタン--> <input type="button" value="名前を保存する" id="NameChanger" /> <!--削除ボタン--> <input type="button" value="削除" id="reset" /><!--名前変換用フォームここまで--><!--表示サンプルここから--><!--class名"dname"の要素が置き換わります--> <div style="margin:20px 0;"> <span class="dname">デフォルト</span> </div><!--表示サンプルここまで-->
32
-
33
- コード
34
-
35
- ```
31
+ <!--名前変換用フォームここから--><!--formで囲う必要はありません--> <!--入力--> <input type="text" name="text" id="NameInput" /> <!--登録ボタン--> <input type="button" value="名前を保存する" id="NameChanger" /> <!--削除ボタン--> <input type="button" value="削除" id="reset" /><!--名前変換用フォームここまで--><!--表示サンプルここから--><!--class名"dname"の要素が置き換わります--> <div style="margin:20px 0;"> <span class="dname">デフォルト</span> </div><!--表示サンプルここまで-->
32
+
33
+ ↑コードにしましたら表示されませんでしたので、文字にさせていただきます。
34
+
35
+
36
36
 
37
37
  HEAD
38
38