打开一个div并加载php内容onclick，然后允许在div onclick上关闭

Question

我有一段JavaScript，应该使用display：none更改div的样式，然后使用从php文件加载的内容填充该div。 我的HTML看起来像这样：

<div class="zone">
                    <div class="line">
                        <span class="capital_missing_3">W</span>ho shall yeve / to myne heed a
                            welle ؛ <a href="#" onclick="compare_toggle_visibility('EETS.QD.1')"><span class="compare">•</span></a>
                    </div>
                    <div class="line">
                        Off bytter teers / my sorowes to compleyne ؛ <a href="#" onclick="compare_toggle_visibility('EETS.QD.1')"><span class="compare">•</span></a>
                    </div>
                    <div class="line">
                        Of a grete condwyt / of trubly waters felle ؛ <a href="#" onclick="compare_toggle_visibility('EETS.QD.1')"><span class="compare">•</span></a>
                    </div>
                    <div class="line">
                        Doun to stylle / fro myne eyen tweyne ؛ <a href="#" onclick="compare_toggle_visibility('EETS.QD.1')"><span class="compare">•</span></a>
                    </div>
                    <div class="line">
                        To schewe the constreynt / of my dedly peyne ؛ <a href="#" onclick="compare_toggle_visibility('EETS.QD.1')"><span class="compare">•</span></a>
                    </div>
                    <div class="line">
                        Whan I allas / behyld and dede see ؛ <a href="#" onclick="compare_toggle_visibility('EETS.QD.1')"><span class="compare">•</span></a>
                    </div>
                    <div class="line">
                        My dere soone blede / in eu<span class="ex">er</span>y veyne ؛ <a href="#" onclick="compare_toggle_visibility('EETS.QD.1')"><span class="compare">•</span></a>
                    </div>
                    <div class="line">
                        A twene too þeues / nayled to a Tree ؛ <a href="#" onclick="compare_toggle_visibility('EETS.QD.1')"><span class="compare">•</span></a>
                    </div>
                </div>
<div class="comparison" id="EETS.QD.1"></div>

而且该javascript应该在底部打开div（id =“ EETS.QD.1”）并填充它。 我的第一次尝试仍然允许切换，但实际上并未加载任何内容：

function compare_toggle_visibility(id) {
   var e = document.getElementById(id);
   e.style.display = ((e.style.display != 'none') ? 'none': 'block');
   e.load('http:/www.minorworksoflydgate.net/XML/XQuery/test.php')
}

由于这行不通，我认为我可能需要调用一个单独的函数来加载页面并进行尝试。

function compare_toggle_visibility(id) {
   var e = document.getElementById(id);
   e.style.display = ((e.style.display != 'none') ? 'none': 'block');
   function () {
       (this).load('http:/www.minorworksoflydgate.net/XML/XQuery/test.php');
   });
}

这不仅不显示内容，而且破坏了切换。 所以我很茫然。 我在这里看过类似的问题，所有这些问题似乎都提出了与我第二种选择相似的解决方案。 我在做什么错，在这里？

Answer 1

尝试这个。 document.getElementById()返回DOM对象引用，但load（）是jQuery函数。 因此，应用该函数的元素应该是jQuery对象。

$(e).load('http:/www.minorworksoflydgate.net/XML/XQuery/test.php');

另类

$('#' + id).load('http:/www.minorworksoflydgate.net/XML/XQuery/test.php');