Javascript 调用包含元素ID的函数以显示其信息
到目前为止,我正在制作一个组织结构图 该模板中的每个人都有一个Javascript 调用包含元素ID的函数以显示其信息,javascript,jquery,Javascript,Jquery,到目前为止,我正在制作一个组织结构图 该模板中的每个人都有一个id,当您单击其中任何一个人时,您将在右侧看到一个边栏,如下所示 很明显,侧边栏上的信息应该是为了打开侧边栏而单击的个人/节点的信息 例如: 在第一幅图中,第三个人/节点来自一个名叫Jorge Lopez的家伙,标题是项目经理,如果你点击这个人,就会出现侧边栏,你应该在侧边栏上看到的信息应该是关于你点击的人Jorge Lopez的其余信息 我将向您展示我目前掌握的代码: *以防万一:我正在使用手柄和jQuery 下面是我在名为ch
id
,当您单击其中任何一个人时,您将在右侧看到一个边栏,如下所示
很明显,侧边栏上的信息应该是为了打开侧边栏而单击的个人/节点的信息
例如:
在第一幅图中,第三个人/节点来自一个名叫Jorge Lopez的家伙,标题是项目经理,如果你点击这个人,就会出现侧边栏,你应该在侧边栏上看到的信息应该是关于你点击的人Jorge Lopez的其余信息
我将向您展示我目前掌握的代码:
*以防万一:我正在使用手柄和jQuery
下面是我在名为chart container.JSON的文件中使用的JSON的一小部分
{
"enterprise" : [
{
"id" : "10",
"name" : "Hellen Quesada",
"role" : "Principal Software Engineer",
"image" : "/image.url",
"employeeN" : "46456456"
},
{
"id" : "11",
"name" : "Jonathan Chavez",
"role" : "Principal Creative Engineer",
"image" : "/image.url",
"employeeN" : "46456456"
},
{
"id" : "12",
"name" : "Rodrigo Ovares",
"role" : "Creative Engineer",
"image" : "/image.url",
"employeeN" : "46456456"
}
]
}
这是我用把手渲染它的方式
{{#each chart-container.[0].enterprise}}
<li class="section">
<a href="#">
<span class="name-role">
<div>{{image}}</div>
{{name}} <br> {{role}}
</span>
</a>
</li>
{{/each}}
因此,在这一点上,如果您清楚了,我可以做些什么来调用侧栏,其中包含您刚才单击的html节点的正确信息?如果您将模板更改为:
<a href="#{{employeeN}}">
然后用它来获取你的员工信息
$(function() {
var s = 0;
$('#sidebar .arrow-box, .client-director').click(function() {
console.log(s);
if (s === 0) {
s = 1;
$('#sidebar').css('left', '0');
$('#sidebar .arrow').removeClass('dir-two');
$('#sidebar .arrow').addClass('dir-one');
$('#content').css('padding-left', '0');
} else {
s = 0;
$('#sidebar').css('left', '-300px');
$('#sidebar .arrow').addClass('dir-two');
$('#sidebar .arrow').removeClass('dir-one');
$('#content').css('padding-left', '300px');
}
});
});
<a href="#{{employeeN}}">
$('#sidebar .arrow-box, .client-director').click(function(evt) {
var employeeN = evt.target.href