使用EJS填充列表中的HTML視圖右側的數據使用EJS

Question

我目前有一個視圖，它基本上是左側的列表和右側的結果視圖。我正在使用Node/EJS，並且傳遞了我需要的所有內容以填充右側的列表和結果視圖。目標是每次點擊列表項目時，結果視圖都會填充關於該列表項目的數據。我不確定如何去做這部分。該列表是動態創建的，因此沒有任何列表項具有唯一的ID。

我目前的建議，我想我點擊一個列表項目，使用jQuery找出唯一的列表項目，並以某種方式傳遞數據到正確的handside視圖？也許這可以純粹用CSS完成，構建與每個列表項目相對應的每個結果視圖，並使用Jquery切換CSS隱藏/顯示。

我不確定最好的解決方案，或者如果我不知道jQuery/EJS的一些技巧，在此先感謝大家！

Answer 1

請檢查下面的例子

<ul> 
    <li id="item1" class="item">Item 1</li> 
    <li id="item2" class="item">Item 2</li> 
    <li id="item3" class="item">Item 3</li> 
    <li id="item4" class="item">Item 4</li> 
</ul> 
<div class="detail"> 
    <div class="itemDetail" id="item1Detail"> 
    Item 1 detail 
    </div> 
    <div class="itemDetail" id="item2Detail"> 
    Item 2 detail 
    </div> 
    <div class="itemDetail" id="item3Detail"> 
    Item 3 detail 
    </div> 
    <div class="itemDetail" id="item4Detail"> 
    Item 4 detail 
    </div> 
</div> 
<script> 
    $("ul li").click(function(){ 
    var attr = $(this).attr('id'); 
    $(".itemDetail").hide(); 
    $("#"+attr+"Detail").show(); 
    }) 
</script> 

plnkr - https://plnkr.co/edit/PRYIWRjAkaHy51tYoPzM?p=preview