回答編集履歴

2

訂正

2020/02/13 23:13

投稿

ikatako
ikatako

スコア270

test CHANGED
@@ -58,8 +58,6 @@
58
58
 
59
59
  var target = $(this).find('.target');
60
60
 
61
- console.log('target=', target);
62
-
63
61
  // 前半5文字を取得
64
62
 
65
63
  target.text( target.text().substr( 0, 5 ) );
@@ -84,4 +82,4 @@
84
82
 
85
83
  ```
86
84
 
87
- [上記のコードを実行する](https://jsfiddle.net/09hacom2/)
85
+ [上記のコードを実行する](https://jsfiddle.net/b6q74w8g/)

1

訂正

2020/02/13 23:13

投稿

ikatako
ikatako

スコア270

test CHANGED
@@ -1,21 +1,87 @@
1
+ ###できない理由
2
+
1
- ブログにアクセスした時のトップ画面(http://ancyfamily.blog.fc2.com/)に、各記事(http://ancyfamily.blog.fc2.com/blog-entry-90.html)ごと`<div id="summary"></div>`を表示したい
3
+ JavaScriptはページに出力された結果をブラウザ側で後から操作するもです
2
4
 
3
5
 
4
6
 
5
- うことすか?
7
+ ゆえにトップ画面に、各記事の`<div id="summary">中身のテキスト</div>`がそもそも出力されてないのあれば、できません。
6
8
 
7
9
 
8
10
 
9
- したらJavaScriptはできません。(トップページにアクセスしたときに各記事のテーブルにAJAXで接続してそのsummaryを抜き出してくるみたいな変な実装をしない限り)
11
+ 「中身のテキスト」をご自身出力できますか?
10
12
 
11
13
 
12
14
 
13
- もしこれがやりたいのでしたらJavaScriptでなく、トップページを出力するときに各記事のテーブルからSQLで取得しておくという流れ実装しなければならないかと思います。
15
+ トップ画面には`<div id="summary"></div>`が現状出力されていまが、「中身のテキスト」は空になってまっているようです。
14
16
 
15
17
 
16
18
 
17
- JavaScriptはあくまで、そのページに出力された結果をブラウザ側でいじのです。
19
+ もしこれが出力きなければ素直<%topentry_body>を使って全文出力るのです。
18
20
 
19
21
 
20
22
 
23
+
24
+
25
+ ###解決策
26
+
27
+ もし全文では長いということでしたら、JavaScriptで部分的に切り抜いてみてはいかがでしょうか。
28
+
29
+
30
+
31
+ 以下のような記事一覧があったとしたら
32
+
33
+ ```HTML
34
+
35
+ <div class="post">
36
+
37
+ <p class="target">あいうえおかきくけこ</p>
38
+
39
+ </div>
40
+
41
+ <div class="post">
42
+
43
+ <p class="target">さしすせそたちつてと</p>
44
+
45
+ </div>
46
+
47
+ ```
48
+
49
+ こうして前半5文字に切り抜けます。
50
+
51
+ ```JavaScript
52
+
53
+ $(function() {
54
+
55
+ $('.post').each(function() {
56
+
57
+ // 全文を取得する
58
+
59
+ var target = $(this).find('.target');
60
+
61
+ console.log('target=', target);
62
+
63
+ // 前半5文字を取得
64
+
65
+ target.text( target.text().substr( 0, 5 ) );
66
+
67
+ // 表示する
68
+
69
+ target.css('display','block');
70
+
71
+ });
72
+
73
+ });
74
+
75
+
76
+
77
+ ```
78
+
79
+ 切り抜かれるまでは表示したくないでしょうから、CSSで非表示にしてあげましょう。
80
+
81
+ ```CSS
82
+
83
+ p{display:none;}
84
+
85
+ ```
86
+
21
- ゆえに、ブログにアクセスした時トップ画面(http://ancyfamily.blog.fc2.com/)に各記事の`<div id="summary"></div>`が出力されていないのでできません。
87
+ [上記コードを実行する](https://jsfiddle.net/09hacom2/)