在没有 jQuery 的 load() 函数的情况下将外部元素 ID 加载到 DIV 中

Question

我在这个项目的早期问题上得到了一些很大的帮助，但现在它变得更加复杂（至少对我而言）。这是一个问答项目，其中包含一个问题、四个可能的答案以及下方的答案按钮，该按钮将在隐藏在按钮上方的 div 中显示答案。当答案实际上在 div 中时，我做得很好，但现在我需要尝试将答案从外部 HTML 文件加载到现在为空的 div 中。 jQuery 的 load() 函数在浏览器中运行良好，然而，这个项目是 iBooks 的增强型 epub 文件，显然不允许 load() 函数（但它确实允许 jQuery）。

是否有另一种方法可以在不使用 load() 的情况下将元素 ID 加载到 DIV 中？另外，既然这变得更加复杂，我如何在打开另一个 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>

提前感谢您的帮助。

Answer 1

首先检查您是否遇到同源策略问题。这可以防止您通过 ajax 从与您正在运行的域不同的站点访问内容。请参阅此MDN reference 了解更多信息。

在 Chrome 等浏览器中，您可以检查调试控制台以查看它是否报告任何请求因同源问题而被阻止。

你可以使用 jQuery，但不能使用 .load() 对我来说毫无意义（这就是我怀疑这是同源策略问题的原因），但如果确实如此，你可以编写自己的迷你.load() 的版本，通过使用 ajax 获取内容，然后将结果放入您的 div 中。仅供参考，如果它是同源问题，您将无法通过这种方式解决它。您将必须有一个位于同一域上的服务器，您可以从中请求数据，并且它必须为您从其他站点获取数据。或者，您必须在另一个可以使用 JSONP 的域上拥有一个合作服务器。