神山树9196 2017-05-26 08:40 采纳率: 0%
浏览 346

怎么能将父节点的图片一次性全部添加成功？怎么能将父节点的图片一次性全部添加成功？

我用ajax将pId为0的 父节点都找出来，怎么能将父节点的图片一次性全部添加成功？
图片说明

  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-08-05 22:24
    关注

    以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

    要一次性将父节点的所有图片添加到页面中，你需要在AJAX请求中获取所有子节点的图片路径，并将这些路径设置到对应的元素上。这通常涉及到使用JavaScript和HTML5的<img>标签来动态地加载图片。

    以下是实现这一功能的一个基本示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .parent img {
            display: none;
        }
    </style>
</head>
<body>

<script>
    $(function () {

        // 初始化树形结构
        var setting = {  
            async: true,
            checkOnSelect: false,
            data: {  
                simpleData: {  
                    id: "id",  
                    text: "text"  
                }  
            },  
            callback: function(data) {}  
        };

        $.ajax({
            url: 'path/to/menuInit.action',
            type: 'POST',
            dataType: 'json',
            success: function(response) {
                var nodes = response.nodes;

                for (var i = 0; i < nodes.length; i++) {
                    if (nodes[i].parentId == 0 && nodes[i].children.length > 0) {
                        // 获取当前节点的图片路径
                        var imageUrl = nodes[i].children[0].image;

                        // 创建一个新的<img>标签并设置它的src属性为imageUrl
                        $("<img>")
                            .attr("src", imageUrl)
                            .appendTo(nodes[i].children[0]);

                        // 隐藏当前节点的原img标签
                        nodes[i].children[0].children[0].style.display = "none";
                    }
                }

                // 检查是否还有其他未处理的节点
                if (nodes.length > 0) {
                    // 如果有未处理的节点，继续循环处理它们
                    for (var j = 0; j < nodes.length; j++) {
                        if (nodes[j].children.length > 0) {
                            // 对于每个有子节点的节点，重复上面的过程
                            for (var k = 0; k < nodes[j].children.length; k++) {
                                var childImageUrl = nodes[j].children[k].image;

                                $("<img>")
                                    .attr("src", childImageUrl)
                                    .appendTo(nodes[j].children[k]);
                            }
                        }
                    }
                }
            },
            error: function(xhr, status, error) {
                console.log(error);
            }
        });
    });
</script>
<div class="parent">
    <div class="child">
        <img src="/images/image.jpg" alt="">
    </div>
    <div class="child">
        <img src="/images/image2.jpg" alt="">
    </div>
</div>

</body>
</html>

    这个例子中，我们首先初始化了一个树形结构，然后遍历所有的节点，如果一个节点是根节点并且其子节点的数量大于0，我们就获取它的图片路径，并创建一个新的标签并将它的src属性设置为这个路径。然后，我们将新的标签添加到它的第一个子节点上，这样就可以让所有的子节点都有图片了。

    注意：这段代码只是一个基础的例子，实际应用中可能还需要根据你的具体需求进行调整。例如，你可能需要对一些特殊情况（比如图片不存在、图片大小不符合等）进行相应的处理。

    评论

报告相同问题？