需要展開/摺疊戲劇摘要並連接兩個ID使用開關

我正在寫一個網頁，其中包含六個莎士比亞戲劇的列表，當您單擊劇本的標題時，會出現摘要。這是第一個玩，作爲一個例子：需要展開/摺疊戲劇摘要並連接兩個ID使用開關

<div class="playheader" id="play1"> 
    <h3>Romeo and Juliet</h3> 
</div> 
<div class="summary" id="sum1"> 
    <p>Stupid teenagers fall in love and die.</p> 
</div>

然後，我用這個FOR循環，使其點擊標題切換摘要。我知道這部分是正確的：

window.onload = initPlaySelector; 
function initPlaySelector() { 
    var playheaders = document.getElementsByClassName("playheader"); 
    for (i=0; i<playheaders.length; i++) { 
    playheaders[i].onclick = togglePlotSum; 
}  
}

我的問題是讓列表擴大。分配指令說，我應該在函數內部有6個SWITCH語句的情況下，將標題的ID（play1）與摘要的ID（sum1）連接起來。我不明白我應該如何連接這兩個ID並在開關盒中使用它們。這是我迄今爲止所做的，只有一個案例完成。我究竟做錯了什麼？

function togglePlotSum() { 
    alert("hello"); 
    var x = this.id // current object is play1/play2/etc. 
switch (x) { 
    case 'play1': 
    var summary = document.getElementById('sum1'); 
    if (summary.style.display == "none") { 
    summary.style.display = "block"; 
} 
    else if (summary.style.display == "block") { 
    summary.style.display = "none"; 
}    
    break; 
} 
}

請不要告訴我使用jQuery，因爲我不知道怎麼辦。當我說我需要在play1和sum1之間「建立連接」時，我只是不知道我的任務意味着什麼。

來源

2014-06-05 user3710004

嗨，這個開關案件工作正常嗎？ – user3662273

你在做什麼似乎很好..只需添加其他5例.. –

-1

我希望，它應該工作

<div class="playheader" id="play_1"> 
    <h3>Romeo and Juliet</h3> 
</div> 
<div class="summary" id="sum_1"> 
    <p>Stupid teenagers fall in love and die.</p> 
</div>

和JavaScript代碼放在這裏

initPlaySelector(); 

function initPlaySelector() { 
    var playheaders = document.getElementsByClassName("playheader"); 
    for (i=0; i<playheaders.length; i++) { 
    playheaders[i].onclick = togglePlotSum; 
}  
} 





function togglePlotSum() { 

     var x = this.id // current object is play1/play2/etc. 
     id=x.split('_').pop(); // it will give the number after underscore 

     var summary = document.getElementById("sum_"+id); 
     if (summary.style.display == "none") { 
     summary.style.display = "block"; 
    } 
     else if (summary.style.display == "block") { 
     summary.style.display = "none"; 
    }

來源

2014-06-05 08:25:07 user3662273

其他情況呢..？ –

什麼是其他情況？，我們不需要開關櫃了 – user3662273

以及這是根據您的編輯。你的第一個答案有一個單案例的開關。現在你錯過了「我應該連接這兩個ID並在開關盒中使用它們」 - 這部分。 –

function togglePlotSum() { 
var id = this.id // current object is play1/play2/etc. 
switch (id) { 
    case 'play1': 
    showOrHide('sum1');   
    break; 
    case 'play2': 
    showOrHide('sum2');  
    break; 
    case 'play3': 
    showOrHide('sum3');   
    break; 
    case 'play4': 
    showOrHide('sum4');   
    break; 
    case 'play5': 
    showOrHide('sum5');   
    break; 
    case 'play6': 
    showOrHide('sum6');   
    break; 
} 
} 
function showOrHide(id){ 
var summary = document.getElementById(id); 
    if (summary.style.display == "none") { 
    summary.style.display = "block"; 
    } 
    else if (summary.style.display == "block") { 
    summary.style.display = "none"; 
    } 
}

來源

2014-06-05 09:11:52

感謝您的幫助，夥計們。我不會發布我的完整代碼，因爲我班的一些人仍然在做這個任務。然而，我發現我的老師試圖暗示的是，我應該使用「替換」功能來用「sum」替換「play」，以便「play1」變成「sum1」。

來源

2014-06-10 23:08:29 user3710004

需要展開/摺疊戲劇摘要並連接兩個ID使用開關

回答

相關問題