Question

我对这个项目的早期问题有了很大的帮助，但现在它变得更加复杂了（对我来说，至少）。这是一个Q＆amp; A项目，带有一个问题，四个可能的答案，下面的答案按钮将显示隐藏在按钮上方的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()（这就是我怀疑它是同源政策问题的原因），但如果确实如此，你可以写下你的通过使用ajax获取内容然后将结果放入div中来拥有.load()的迷你版本。仅供参考，如果是同一原产地问题，您将无法以这种方式解决问题。您必须拥有一个位于同一域的服务器，您可以从中请求数据，并且必须从其他站点获取数据。或者，您必须在另一个域上拥有一个可以使用JSONP的协作服务器。

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

1 个答案: