2016-10-26 25 views
2

ある質問で私を助けてくれる人もいます:別のdivをクリックしてdiv内のデータを変更してください

私は2つのdivを持っています。
最初のファイルはJSONファイルのDATAで作成されています。

私はJSONで何個のDATAを持っているかによって、行数が少なくなる関数を持っています。
1つの行をクリックすると、別のdivが表示され、このオプションに関する追加情報が表示されます。
別のオプションをクリックすると、情報が更新されます。

実際には次のようになります。
私は最初のオプションをクリックします - > DIVを表示します。
2番目のオプションをクリックすると、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> 

そして第二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> 

それがどのように見えるか: How it looks like

その後のいずれかにIをクリックしてください名前は、divを開きます。
他の名前をクリックすると、自分の情報が更新されるはずです(黒丸で囲んだところを参照)。 here in the black rounds JSONにこの情報を追加する必要がありますか?
これを実現するにはどうすればよいですか?

ありがとうございました。

+0

ここでは、私のファイル(json、html、css)と[リンク](https://drive.google.com/file/d/0B6ov-TJi--Z8dTFIbGJKM01UbFk/view?usp=sharing)です。 – Serejqa

答えて

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を変更:
は、私は情報のみが期待されている各divにいくつかのIDを追加

は、だからここに更新されたスクリプトです。
クラスを削除していないので、役に立たないように見えます(?)。

<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が必要です。
私はそれが使用されているかどうかもわかりません...
私の解決策では、私はそれをコメントして何の効果も見ませんでした。

+0

ありがとうあなたのソリューションとコメントには非常に多くの回答があります。どのように動作するかを理解することは非常に便利です。 はい、私はliveFilterを使ってNAMEとNUMBERSで検索しましたが、私のためには機能しませんでした(私は自分の関数を削除して、スクリプトの読み込みを忘れてしまった)。私はテーブルを使って別のhtmlを作成しようとしましたが、それはうまくいきました(テーブルでは意味します)。しかし、私のdivでそれを使用したとき、うまくいきませんでした。 ここに私の質問です[リンク](http://stackoverflow.com/questions/40226400/livefilter-in-divs)もしあなたがそれを修正する方法を知っていれば、あなたの側のコメントを見ることはいいでしょう。どうもありがとうございました – Serejqa

+0

明日の別の質問を確認します。 3:15 amここに。 ;) –

+0

いいえ、問題ありません:) – Serejqa

関連する問題