ajax を使って，ｈｔｍｌを読み込み表示する方法

解決済

質問者：km340
質問日時：2010/02/26 10:25
回答数：3件

webページのfaqを作成しています。
目次が並んでいて，どれかひとつ質問をクリックすると，その下に回答が表示されるという仕組みにしようと考えています。
それについては以下のようにプログラムしてみました。

<head>
...略...
<script type="text/javascript" src="../../jQuery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.demo-show:eq(0)> div').hide();
$('div.demo-show:eq(0)> h3').click(function() {
$(this).next().slideToggle('fast');
});
});
</script>
</head>
<body>
<div class="demo-show">
<h3>質問1</h3>
<div>"answer1.html"を読み込んで表示</div>
<h3>質問２</h3>
<div>"answer2.html"を読み込んで表示</div>
<h3>質問３</h3>
<div>"answer3.html"を読み込んで表示</div>
</div>
</body>

これにhtmlファイルを読み込む機能を持たせるために，<script>に一番下の3行を追加しました。
<head>
...略...
<script type="text/javascript" src="../../jQuery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.demo-show:eq(0)> div').hide();
$('div.demo-show:eq(0)> h3').click(function() {
$(this).next().slideToggle('fast');
$("div.a-1").load("./answer1.html"); ←追加
$("div.a-2").load("./answer2.html"); ←追加
$("div.a-3").load("./answer3.html"); ←追加
});
});
</script>

<body>は
<div class="demo-show">
<h3>質問1</h3>
<div. class="a-1"></div>
<h3>質問２</h3>
<div.class="a-2"></div>
<h3>質問３</h3>
<div.class="a-3"></div>
</div>

これを実行すると，文字の場所がずれて表示されてしまいます。
（今回の作業は既に出来上がっているページに機能を追加しているので，おそらくタグが干渉しあっているのだろうと思います。これは，細かく確認すれば直るとは思います）
その他，細々と不具合があります。
また，質問の数は５０以上あります。

この方法以外に良い方法がありましたら教えていただけると助かります。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： my--
回答日時：2010/03/02 21:50

検証作業のために借りてるスペースにサンプルを置きました。

Ajax関連はにわか仕込みですが、使えそうならどうぞ。

サンプルページ
http://library.nukimi.com/sample/ajax/ajaxsample …
解説ページ
http://library.nukimi.com/sample/ajax/ajax.test. …

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
サンプルを参考にさせていただき，いろいろ試してみようと思います。

通報する

お礼日時：2010/03/16 09:38

No.2

回答者： fujillin
回答日時：2010/02/26 12:06

ご質問文をざっと読んだだけで、確認はしていませんが…

＞$("div.a-1").load("./answer1.html"); ←追加
＞$("div.a-2").load("./answer2.html"); ←追加
＞$("div.a-3").load("./answer3.html"); ←追加
って最初に一度実行すればよいので、clickの処理の中に入れる必要はないでしょう。しかも表示した後に読込んでるし、その時の表示に関係ない部分も毎回読込むことになっている。
（セレクタはdiv.a-1なのかdiv .a-1なのか、両方ともOKなのか？ ←jqueryよく知らないので未確認)

HTMLの
＞<div. class="a-1"></div>
＞<div.class="a-2"></div>
＞<div.class="a-3"></div>
はタイポなのでしょうか、本当にこういうソースなのでしょうか？

＞質問の数は５０以上あります
数が多いので効率よくというのであれば、個別のclass名を設定するようなことはしないで、「質問」+「回答」の組合わせが複数個あるという構成に対応できるように考えるべきではないでしょうか？
また、あとから回答を読込むということが条件ならば、読込む時にdiv要素も生成して追加していくようにするという方法もありそう。
（元のソースは質問だけ並んでいる形）