打開一個div並加載php內容onclick，然後允許關閉div onclick

Question

我有一段JavaScript應該改變顯示div的樣式：none，然後填充該div與從PHP文件加載的內容。我的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應該開拓底部（ID =「EETS.QD.1」）div和填充它。我第一次嘗試仍允許切換，但實際上並沒有加載任何內容：

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');