通過點擊另一個div來更改div中的數據

Question

有人可以幫我解決一個問題：

我有2個div。
第一個是來自JSON文件的數據。

我有一個功能，使很少的行（取決於我在JSON中有多少數據）。
因此，通過單擊一行，它應該顯示另一個div，其中包含有關此選項的其他信息。
如果我點擊另一個選項，它應該更新信息。

它實際上是這樣工作的：
我點擊第一個選項 - >它顯示了DIV。
我點擊第二個選項，它正在關閉DIV。

我只是做了改變CSS（display：none/block）的函數。

這裏是第一DIV的代碼：

<script type="text/javascript"> 
    function view(n){ 
     style = document.getElementById(n).style; 
     style.display = (style.display == 'block') ? 'none' : 'block'; 
    } 
</script> 
<script> // Reading DATA from JSON 
    $(document).ready(function(){ 
     $.getJSON("accounts.json", function(data){ 
      $.each(data, function(key, value){ 
       $("#main_list").append(
         buildRow(value.name 
           ,value.number 
           ,value.city,value.amount,value.currency,value.rate) 
       ); 
      }); 
     }); 
    }); 
</script> 
<script> // Making divs from JSON 
    function buildRow(a,b,c,d,e,f){ 
     return '<div class="deposit-small-block first-block size-small-block tt" onclick="view(\'t1\'); return false">\ 
        <div class="button_block">\ 
         <div class="div-for-button">\ 
          <input type="radio" name="on">\ 
         </div>\ 
        </div>\ 
        <div class="deposit-form-block-name">\ 
         <div class="deposit-form-block-name-first white-text"><name>'+a+'</name></div>\ 
         <div class="deposit-form-block-name-second white-text"><number>'+b+'</number></div>\ 
         <div class="deposit-form-block-name-third white-text"><city>'+c+'</city></div>\ 
        </div>\ 
        <div class="deposit-form-block-sum">\ 
         <div class="deposit-form-block-sum-text white-text">\ 
          <amount>'+d+'</amount><br><currency>'+e+'</currency>\ 
         </div>\ 
        </div>\ 
        <div class="deposit-form-block-perc">\ 
         <div class="deposit-form-block-sum-text white-text"><rate>'+f+'</rate></div>\ 
        </div>\ 
       </div>\ 
       ' 
    } 
</script> 

和2 DIV的代碼：

<aside id="t1" class="right-sidebar"> 
<div class="right-sidebar-header"> 
    <div class="right-sidebar-header-text">Информация о выбранном вкладе 
    </div> 
</div> 
<script type="text/javascript"> 

    function openbox(id){ 
     display = document.getElementById(id).style.display; 

     if(display=='none'){ 
      document.getElementById(id).style.display='block'; 
     }else{ 
      document.getElementById(id).style.display='none'; 
     } 
    } 
</script> 
<div class="box2"> 
    <div class="first-option"> 
     <div class="best-text"><a href="#" 
           style="color: black" 
           class="dot" 
           onclick="openbox('box'); 
           return false">Условия</a> 
     </div> 

     <div id="box" style="display: none;"> 
      <div class="first-option-inside"> 
       <div class="first-option-inside-table-first grey-text">Ставка</div> 
       <div class="first-option-inside-table-second grey-text">Дата открытия</div> 
       <div class="first-option-inside-table-third grey-text">Дата окончания</div> 
      </div> 
      <div class="first-option-inside"> 
       <div class="first-option-inside-table-first-under">7.4%</div> 
       <div class="first-option-inside-table-second-under">23.04.2015</div> 
       <div class="first-option-inside-table-third-under">23.04.2017</div> 
      </div> 
      <div class="max-sum-text">Максимальная сумма</div> 
      <div class="min-sum-text">1 000 000,00 Рубль РФ</div> 
      <div class="max-sum-text">Неснижаемый остаток</div> 
      <div class="min-sum-text">1 000,00 Рубль РФ</div> 
      <div class="max-sum-text">Минимальная сумма пополнения наличными</div> 
      <div class="min-sum-text">1 000 000,00 Рубль РФ</div> 
      <div class="max-sum-text">Доступная сумма для снятия</div> 
      <div class="min-sum-text">20 000,00 Рубль РФ</div> 

     </div> 
    </div> 

如何，它看起來像：

然後我點擊任何的名稱，它打開div。
當我點擊另一個名稱時，它應該更新我的信息（請參閱黑色圈出）。 所以我應該添加這個信息到我的JSON？
或者如何實現這個？

謝謝你的回答。

Answer 1

執行此操作的方法是在data陣列中攜帶index所需的信息。

因此，如果您將此index放在每行的onclick="view(...)中，則將其攜帶到view()函數。
view()函數打開右側面板上點擊一行...
所以這是更新相關信息的最佳位置來查看。

因此，這裏是更新後的腳本：

var jsonArray=[]; 
var lastIndexViewed=-1; 

function view(n,index) { 

    if((lastIndexViewed==index) || (lastIndexViewed==-1)){ // Improved the condition to take lask viewed in account. 
     style = document.getElementById(n).style; 
     style.display = (style.display == 'block') ? 'none' : 'block'; 
    } 

    console.log("jsonArray index "+index+" data is required."); // Index is present... Let's use it. 

    // Place the info at the right places. 
    $("#"+n).find("#rate").html(jsonArray[index].rate); 
    $("#"+n).find("#open_date").html(jsonArray[index].open_date); 
    $("#"+n).find("#close_date").html(jsonArray[index].close_date); 
    $("#"+n).find("#max_sum").html(jsonArray[index].max_sum); 
    $("#"+n).find("#min_balance").html(jsonArray[index].min_balance); 
    $("#"+n).find("#min_sum_in").html(jsonArray[index].min_sum_in); 
    $("#"+n).find("#sum_take").html(jsonArray[index].sum_take); 

    // Keep last viewed index in memory to prevent boring div close when trying to view another row. 
    lastIndexViewed=index; 
} 

// Reading DATA from JSON 
$(document).ready(function(){ 
    $.getJSON("accounts.json", function(data){ 

     // Saving the array to use it later 
     console.log(data); 
     jsonArray = data; 

     $.each(data, function(key, value){ 
      $("#main_list").append(
        buildRow(value.name, 
          value.number, 
          value.city, 
          value.amount, 
          value.currency, 
          value.rate, 
          key)   // To carry the index of the array of json objects. 
      ); 
      console.log("On row buiding, the index within jsonArray: "+key); // This is the index 
     }); 
    }); 
}); 

// Making divs from JSON 
function buildRow(a,b,c,d,e,f,index){ 
    return '<div class="deposit-small-block first-block size-small-block tt" onclick="view(\'t1\','+index+'); return false">'+ // The index is sent to the function that opens the right div. 
       '<div class="button_block">'+ 
        '<div class="div-for-button">'+ 
         '<input type="radio" name="on">'+ 
        '</div>'+ 
       '</div>'+ 
       '<div class="deposit-form-block-name">'+ 
        '<div class="deposit-form-block-name-first white-text"><name>'+a+'</name></div>'+ 
        '<div class="deposit-form-block-name-second white-text"><number>'+b+'</number></div>'+ 
        '<div class="deposit-form-block-name-third white-text"><city>'+c+'</city></div>'+ 
       '</div>'+ 
       '<div class="deposit-form-block-sum">'+ 
        '<div class="deposit-form-block-sum-text white-text">'+ 
         '<amount>'+d+'</amount><br><currency>'+e+'</currency>'+ 
        '</div>'+ 
       '</div>'+ 
       '<div class="deposit-form-block-perc">'+ 
        '<div class="deposit-form-block-sum-text white-text"><rate>'+f+'</rate></div>'+ 
       '</div>'+ 
      '</div>' 
} 

唯一的HTML改爲：
我只加了一些IDS每個div其中信息的預期。
我沒有刪除看起來無用的類（？）。

<div id="box" style="display: none;"> 
    <div class="first-option-inside"> 
     <div class="first-option-inside-table-first grey-text">Ставка</div> 
     <div class="first-option-inside-table-second grey-text">Дата открытия</div> 
     <div class="first-option-inside-table-third grey-text">Дата окончания</div> 
    </div> 
    <div class="first-option-inside"> 
     <div id="rate" class="first-option-inside-table-first-under">7.4%</div> 
     <div id="open_date" class="first-option-inside-table-second-under">23.04.2015</div> 
     <div id="close_date" class="first-option-inside-table-third-under">23.04.2017</div> 
    </div> 
    <div class="max-sum-text">Максимальная сумма</div> 
    <div id="max_sum" class="min-sum-text">1 000 000,00 Рубль РФ</div> 
    <div class="max-sum-text">Неснижаемый остаток</div> 
    <div id="min_balance" class="min-sum-text">1 000,00 Рубль РФ</div> 
    <div class="max-sum-text">Минимальная сумма пополнения наличными</div> 
    <div id="min_sum_in" class="min-sum-text">1 000 000,00 Рубль РФ</div> 
    <div class="max-sum-text">Доступная сумма для снятия</div> 
    <div id="sum_take" class="min-sum-text">20 000,00 Рубль РФ</div> 

</div> 

id應該用作唯一選擇器。
class應該用於收藏。
我使用了與json中的屬性名稱相同的id名稱...爲了清楚起見。

看一看在live link此解決方案：

旁註：請注意，我改變了你的庫加載順序：

<script src="jquery.livefilter.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

至：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script> 
<script src="jquery.liveFilter.js"></script> 

因爲liveFilter.js需要首先加載jQuery。
我甚至不確定它是否被使用...
在我的解決方案中，我評論了它，並沒有看到任何效果。