【发布时间】:2016-10-26 18:02:49
【问题描述】:
有人可以帮我解决一个问题吗:
我有 2 个 div。
第一个由 JSON 文件中的 DATA 组成。
我有一个生成几行的函数(取决于我在 JSON 中有多少数据)。
因此,通过单击一行,它应该显示另一个 div,其中包含有关此选项的其他信息。
如果我点击另一个选项,它应该会更新信息。
它实际上是这样工作的:
我点击第一个选项 --> 它显示了 DIV。
我点击第二个选项,它正在关闭 DIV。
我刚刚制作了更改 CSS 的函数(显示:无/块)。
这是第一个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>
然后我单击任何名称,它会打开 div。
当我点击另一个名字时,它应该会更新我的信息(见黑色圈出的位置)。
那么我应该将此信息添加到我的 JSON 中吗?
或者如何实现?
感谢您的回答。
【问题讨论】:
-
这里有一个link 和我的文件(json、html、css)
标签: javascript jquery html css json