Question

我有一个像数据一样的树的json对象。我想以交互方式在UI上显示它。单击组件时，应显示其子项，依此类推。我写了以下代码

            <!DOCTYPE html>
            <html>
            <head>

            <script src="jquery-1.9.1.js"></script>
            </head>
            <body>
            <div>
              <ul id="result"></ul>

            </div>
            <script>
            var json_data = {
                "component": "A",
                "status": 0,
                "children": [
                    {
                        "component": "AA",
                        "status": 0,
                        "children": [
                            {
                                "component": "AAA",
                                "status": 0,
                                "children": []
                            },
                            {
                                "component": "AAB",
                                "status": 2,
                                "children": []
                            }
                        ]
                    },
                    {
                        "component": "AB",
                        "status": 0,
                        "children": [
                            {
                                "component": "ABA",
                                "status": 0,
                                "children": []
                            },
                            {
                                "component": "ABB",
                                "status": 1,
                                "children": []
                            }
                        ]

                    }
                ]
            };

            $(document).ready($(function(){
                var $result = $('#result');
                start(json_data )
                //Root Node display
                function start(obj)
                {

                    $('<li id="' + obj.component + '">').text(obj.component + '-'+obj.status).appendTo($result);
                    $("#"+obj.component).click(function(){
                        displaychildren(obj);
                    });

                }
                Display the children of an element on click by recursion
                 function displaychildren(node)
                {
                    $.each(node.children,function (i,v){
                            $('<li id="' + v.component + '">').text(v.component + '-'+v.status).appendTo($result);                                                    
                            if$("#"+v.component).click(function(){
                            alert("Problem is here");
                            displaychildren(v);
                            });

                        });                     
                }
                });

我面临的问题是displaychildren函数中元素的onclick不起作用。如果删除了onclick条件，则会显示所有组件的所有元素。我希望只显示所选组件的子项。有谁知道导致问题的原因

Answer 1

语法错误：

if$("#"+v.component).click(function(){

应该是（如果你的意思是这样）：

if($("#"+v.component).click(function(){

我猜你的代码应该是：

$("#"+v.component).click(function(){
                            alert("Problem is here");
                            displaychildren(v);
                            }

因为if（）在click事件周围没有多大意义。

在for循环中动态创建的html元素的Onclick事件

1 个答案: