我的网页中有jstree，我想根据树中选择的 Node 更改网页中的项目。
我从一个示例开始，查看每个选定 Node 的图像。 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 未定义。
如何将变量 r 从 AJAX 发送到 JS？有没有一种简单的方法可以让网页根据选定的 Node 动态改变内容？
谢谢，，
最佳答案
我在您的代码中没有看到任何 ajax。
要在 Node 单击时动态更改图像，我会为图像分配一个 ID，并在获取所选 Node 的部分中更新其 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);
关于javascript - 如何根据jstree中选定的 Node 传递值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42914066/