ある質問で私を助けてくれる人もいます:別の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>
その後のいずれかにIをクリックしてください名前は、divを開きます。
他の名前をクリックすると、自分の情報が更新されるはずです(黒丸で囲んだところを参照)。 JSONにこの情報を追加する必要がありますか?
これを実現するにはどうすればよいですか?
ありがとうございました。
ここでは、私のファイル(json、html、css)と[リンク](https://drive.google.com/file/d/0B6ov-TJi--Z8dTFIbGJKM01UbFk/view?usp=sharing)です。 – Serejqa