打开div并加载php内容onclick,然后允许关闭div onclick

时间:2015-09-05 17:17:37

标签: javascript jquery html

我有一段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');
   });
}

这不仅不显示内容,而且会打破切换。所以我很茫然。我在这里查看了类似的问题,所有这些问题似乎都提出了类似于我的第二个选项的解决方案。我在做什么错了,在这里?

1 个答案:

答案 0 :(得分: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');