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

标签 javascript jquery html css json

谁能帮我解答一个问题:

我有 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>

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

然后我点击任何名称，它打开 div。
当我点击另一个名字时，它应该更新我的信息(见黑色圆圈处)。 here in the black rounds 那么我应该将此信息添加到我的 JSON 中吗？
或者如何实现？

感谢您的回答。

最佳答案

实现方式是在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。
我什至不确定它是否被使用...
在我的解决方案中，我将其注释掉但没有看到效果。

关于javascript - 通过单击另一个 div 更改 div 中的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40269206/

上一篇：javascript - 我正在使用 HTML、CSS 和 Javascript 创建一个计算器。我被困在平方根函数

下一篇：html - 最小高度 :100% along with flexbox’s align-items: center; dont make items vertically center

相关文章：

javascript - 如何使用jquery扩展对象

javascript - Webpack 别名与 <img> src 和文件加载器不复制图像

javascript - 如何在线操作网站？

javascript - Canvas 的 ToDataURL (JavaScript) 在通过 PHP 上传到服务器后创建损坏的 PNG 文件

html - block 格式化上下文实际上有什么作用？

jquery - 如何让 Photoswipe 从缩略图列表中识别整个图库

javascript - 如果未评估条件 - 所有选项均不匹配

javascript - Javascript 日期中的无效日期

javascript - html() 和点击处理程序

html - 当我将鼠标悬停在 chrome 中的自动完成元素上时，如何禁用输入标签的样式更改？

©2024 IT工具网  联系我们