2011-12-14 20 views
0

このプロジェクトの以前の問題について大きな助けを得ましたが、今はもっと複雑になっています。これはQです&質問、4つの可能な回答、およびその下の回答ボタンがあるプロジェクトは、ボタンの上に隠されたdivの回答を表示します。答えが実際にdivにあるときにはうまくいっていますが、今は空のdivに外部HTMLファイルからの答えを読み込む必要があります。 jQueryのload()関数はブラウザでうまく機能しましたが、このプロジェクトはiBooks用の拡張されたepubファイルです。これは明らかにload()関数を許可していません(jQueryを許可しています)。jQueryのload()関数を使用せずにDIVに外部要素IDをロード

load()を使用せずにDIVに要素IDをロードする別の方法はありますか?また、これは複雑になっているので、別のdivを開くときに前のdivを閉じるためにどのようにトグルを得るのですか?

のjQuery:

$(function() { 
    $(".answer").click(function() { 
     $(this).prev(".content").load($(this).attr('href')).toggle("slow"); 
    return false; // And prevent it following the link 
    }); 
}); 

CSS:

div.content { 
    display: none; /*--hidden by default--*/ 
    width: 300px; 
    height: auto; 
    margin: 10px; 
    padding: 20px; 
    background: white; 
    border: 1px solid black; 
    cursor: pointer; 
} 
a.answer { 
    font-family: sans-serif; 
    font-weight: bold; 
    font-style: normal; 
    font-size: 0.92em; 
    line-height: 3em; 
    text-indent: 0em; 
    text-align: left; 
    margin: 1em 0em 0em 1em; 
} 

HTML:任意の助けを事前に

<div class="keep"> 
    <p class="q"><samp class="q-no">1.</samp> Interpret the following directions:</p> 
    <p class="q-equation">i cap po qid × 10d</p> 
    <p class="an"><span class="choice">a.</span> Take one capsule by mouth four times a day for ten days.</p> 
    <p class="an"><span class="choice">b.</span> Take one capsule by mouth three times a day for ten days.</p> 
    <p class="an"><span class="choice">c.</span> Take one capsule by mouth twice a day for ten days.</p> 
    <p class="an"><span class="choice">d.</span> Take one capsule by mouth once a day for ten days.</p> 

    <div class="content"> 
    </div> 

    <a class="answer" href="04b-Ch4-Answers.html #anchor-24-anchor">Answer</a> 
</div> 

<div class="keep"> 
    <p class="q"><samp class="q-no">2.</samp> Interpret the following directions:</p> 
    <p class="q-equation">ii tab po tid × 7d.</p> 
    <p class="an"><span class="choice">a.</span> Take two tablets by mouth four times a day for seven days.</p> 
    <p class="an"><span class="choice">b.</span> Take two tablets by mouth three times a day for seven days.</p> 
    <p class="an"><span class="choice">c.</span> Take two tablets by mouth twice a day for seven days.</p> 
    <p class="an"><span class="choice">d.</span> Take two tablets by mouth once a day for seven days.</p> 

    <div class="content"> 
    </div> 

    <a class="answer" href="04b-Ch4-Answers.html #anchor-25-anchor">Answer</a> 
</div> 

感謝。

+0

AJAXリクエストは動作しますか?そうでない場合は、サーバー側の言語を使用する必要があります。 – zzzzBov

+0

正直言って、AJAXリクエストがepubで動作するかどうかはわかりません。これは私が試した唯一のものです。残念ながら、これはepubファイルなので、サーバー側の言語は適用されません。 Javascript自体は、EPUB3標準の電子書籍にとってまったく新しいものです。 – Fluketyfluke

答えて

0

まず、同じorigin-policyに問題があるかどうかを確認します。これにより、実行中のドメインとは異なるドメインのサイトからajax経由でコンテンツにアクセスできなくなります。詳細はMDN referenceを参照してください。

Chromeのようなブラウザでは、デバッグコンソールをチェックして、同じ起源の問題が原因でブロックされたリクエストがあるかどうかを確認できます。

jQueryを使用することはできませんが、​​(これは同じ起源のポリシーの問題だと思われます)という理由ではありませんが、本当にそうであれば、独自のミニバージョン​​の内容をajaxで取得し、divに結果を入れてください。参考までに、元の問題と同じ場合は、このように回避することはできません。あなたは、あなたがデータを要求できる同じドメインにあるサーバーを持っていなければなりません。そして、それはあなたのために他のサイトからデータを取得する必要があります。または、別のドメインにJSONPを使用できる協力サーバーを用意する必要があります。

+0

私はChromeでファイルをテストする際に最初にMDNリファレンスを読みましたが、問題はepubファイルではすべてのファイルがローカルであることです。私はサーバーからファイルを引き出すことができないので、このローカルホスティングの問題であれば、それを解決する実際の方法はありません。 – Fluketyfluke

+0

これはローカルのホストされたepubファイルのかなり制約的な問題であるため、epub/iBooksの開発者のドキュメントを検索して、何らかの回避策があるかどうか確認することをお勧めします。ここでは、外部から取得した動的データを表示できるコンテンツを提供することができます(オフラインでは明らかに機能しません)。 – jfriend00

+0

アプリの開発とは異なり、Appleはepubファイルでできることとできないことをアドバイスするのに最も役立ちません。同じことがB&N、特にアマゾンの低速火災の場合も同じです。彼らは神聖なグノーシスのようなスペックを扱うか、それを完全に無視します。そして出版社は、コンテンツが常に利用可能であるという考えを好まないだろう。私はあなたの助言に感謝します。 – Fluketyfluke

関連する問題