jstree中selectred节点如何传值

Question

我的网页中有jstree，我想根据树中选择的节点更改网页中的项目。

我从一个示例开始，以查看每个选定节点的图像。这是 HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Tree Monitoring</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="/assets/navbar.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
  </head>

  <body>
    <% include partials/nav.ejs %>
    <div class="container" style="padding-top: 100px;">
        <div class="row">
            <div class="col-lg-12">
            <div id="mytree1">
          <ul>
                    <li>element1
                    <ul>
                        <li>element2
                            <ul>
                    <li>element3</li>
                            </ul>
                        </li>
                    </ul>
                    </li>
                </ul>
            </div>

            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
            <script>
                $(function () {
                // 6 create an instance when the DOM is ready
                $('#mytree1').jstree({
              //"plugins": ["checkbox"]
            });
            $('#mytree1')
              // listen for event
              .on('changed.jstree', function (e, data) {
                var i, j, r = [];
                for(i = 0, j = data.selected.length; i < j; i++) {
                  r.push(data.instance.get_node(data.selected[i]).text);
                }
                console.log(r[0])
              })
              // create the instance
              .jstree();
            });
        </script>
            </div>
        </div>
    <div class="row">
      <div class="col-lg-12">
        <!-- Conditionally display Sign In or Sign Out -->
        <% if(r[0]=="element1"){ %>
          <img src="/assets/image1.png" class="img-responsive center-block">
        <% }%>
        <% if(r[0]=="element2"){ %>
          <img src="/assets/image2.png" class="img-responsive center-block">
        <% }%>
        <% if(r[0]=="element3"){ %>
          <img src="/assets/image3.png" class="img-responsive center-block">
        <% }%>
      </div>
     </div>
    </div>
  </body>
</html>

我一直有错误：r 未定义。

如何将AJAX中的变量r传给JS？有没有一种简单的方法可以让网页根据所选节点动态更改其内容？

谢谢,

Answer 1

我在你的代码中没有看到任何 ajax。

要在单击节点时动态更改图像，我会为图像分配一个 ID 并在您获取所选节点的部分更新其 src 属性，如下所示。

查看演示 - Fiddle Demo

...

for(i = 0, j = data.selected.length; i < j; i++) {
     r.push(data.instance.get_node(data.selected[i]).text.trim());  
     // notice the trim above - you need it since the label will have a line break symbol, which you don't need
     // I would rather get an id of the node, than the label
}


var src = '';
switch (r[0]) {
    case 'element1':
        src = '...';
        break;
    case 'element2':
        src = '...';
        break;
    case 'element3':
        src = '...';
        break;
}
$('#img-status').attr('src', src);

jstree中selectred节点如何传值

How to pass values according to selectred node in jstree

html

javascript

ajax

node.js

jstree