Question

有人可以帮我解决一个问题：

我有2个div 第一个是由JSON文件中的DATA组成的。

我有一个几行（取决于我在JSON中有多少DATA）的功能因此，通过单击一行，它应显示另一个div，其中包含有关此选项的其他信息如果我点击另一个选项，它应该更新信息。

它实际上是这样的：
我点击第一个选项 - ＆gt;它显示了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>

第二个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

这样做的方法是在index数组中携带data所需信息。

因此，如果您将此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应该用于收藏。
我使用了相同的id名称作为json中的属性名称...为了清楚起见。

查看此解决方案的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 我甚至不确定它是否被使用...
在我的解决方案中，我对它进行了评论并且看不到任何效果。

通过单击另一个div更改div中的数据

1 个答案: