0

我有一个如下的 javascript 变量：

 var treeNode= [{"id":"T1"},{"id":"T2","children":[{"id":"T3"},{"id":"T4"},{"id":"T5","children":[{"id":"T6"}, {"id":"T7"},{"id":"T8"}]},{"id":"T9"},{"id":"T10"}]},{"id":"T11"},{"id":"T12"}];

节点 t3、t4、t5、t6、t7、t8、t9、t10 是节点 t2 的子节点，我在每个节点上都有一个停用链接。单击停用链接使链接处于活动状态并删除链接。在图片中提到。 在此处输入图像描述

现在我想在父节点的所有子节点上进行相同的活动并删除链接。例如 T3,T4,T5,T6,T7,T8,T9,T10 是 T2 的孩子。如果我点击 T5，那么这将适用于 T6、T7、T8。

我尝试了下面的递归代码。可能是我的方法不对。请指教。

var objTreeNode = eval(treeNode);
trav(objTreeNode); 
function trav(TreeNodeObj){
    var i=0;
    for (i=0;i<TreeNodeObj.length;i++){

        if(!TreeNodeObj[i].children){
            if(objID==TreeNodeObj[i].id){ // will get T2 if click on deactivate link of Item T2
            document.getElementById('span_'+TreeNodeObj[i].id).innerHTML = '<a href="javascript:activate(\'' + objID + '\');">Activate</a>    <a href="javascript:deleteNode(\'' + objID
            +'\');">Delete</a>';
            }
        }
        else{
            childObj = TreeNodeObj[i].children;
            trav(childObj)
        }
    }

}
4

1 回答 1

0

您的代码中有一些愚蠢的东西，让我修复它们：

1.“评估是邪恶的！”

var treeNode= [{"id":"T1"},{"id":"T2","children":[{"id":"T3"}]}];
var objTreeNode = eval(treeNode);
trav(objTreeNode);

为什么要调用 eval()？让我们看看 MDN 对此有何评论：

  • 不要使用评估！这是危险和缓慢的。There are safe (and fast!) alternatives to eval() for common use-cases.

    那么你的“用例”是什么？为什么在这里调用 eval ？什么是“更好”的解决方案？如果您阅读了 MDN 上的整个文档，您可以阅读：

  • If the argument of eval() is not a string, eval() returns the argument unchanged.

    所以除非treeNode是一个字符串var objTreeNode = eval(treeNode);基本上等于var objTreeNode = treeNode;

您可以删除整个 eval() 行并使用 treeNode。它已经是一个对象。

2.骆驼案

function trav(TreeNodeObj) {

这不仅仅是一个错误，只是一个约定：在 JavaScript（以及在大多数具有类似 C 语法的语言中）中，函数的参数用小写驼峰写（第一个字母小写，其他单词的第一个字母大写）。

function trav(treeNodeObj) {

3. objID 未定义

您的代码中没有定义 objID 变量。尽管您可能在给定时间在其他地方定义了一个全局变量，但将其作为参数引入函数中会更安全。

function trav(treeNodeObj, objID) {

4. 你的代码在什么时候做什么

让我弄清楚你的代码当前做了什么：

  • 迭代给定对象的 children 属性（希望是一个数组）。
    • 如果一个元素没有子元素
      • 检查数组项是否具有所需的 ID 属性，并将其更改为 innerHTML
    • 别的
      • 在孩子身上调用函数

那么它的作用：如果没有子元素，则更改具有给定 ID 的元素。

您需要的是：更改具有给定 ID 的元素及其子元素。

我刚刚像这样修改了你的函数：

function trav(treeNodeObj, objID, activate) {
    var i = 0;
    for (i = 0; i < treeNodeObj.length; i++) {
        var childrenActive = false;

        if (objID === treeNodeObj[i].id || activate) { // will get T2 if click on deactivate link of Item T2
            childrenActive = true;
            document.getElementById('span_' + treeNodeObj[i].id).innerHTML = '<a href="javascript:activate(\'' + objID + '\');">Activate</a>    <a href="javascript:deleteNode(\'' + objID + '\');">Delete</a>';
        }

        if (treeNodeObj[i].children) {
            childObj = treeNodeObj[i].children;
            trav(childObj, objID, childrenActive);
        }
    }
}

由于您需要更改所有子元素，因此我需要引入剪辑。这是激活参数。如果 activate 参数为真，您就不需要再检查 ID，您知道我们正在迭代具有给定 ID 的元素的子元素，因此无论如何都要更改元素。

即使元素有子节点，您也需要更改元素，所以我重新构建了 if-s。

我还制作了一个 jsfiddle 供您测试：http: //jsfiddle.net/JZ52g/3/

您可以在函数调用时更改 id 参数。

于 2013-04-10T08:23:23.580 回答