[英]how to selected project details from side bar menu in html?
在这里,我从json获取项目列表。 JSON结果将在侧栏中列出的地方有一个菜单。
这是我得到的JSON结果
"projects": [
{
"instances": null,
"name": "decodingideas",
"projectid": "decodingideas-147616",
"projectnumber": 334691107943,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
},
{
"instances": null,
"name": "pupil-workers",
"projectid": "pupil-workers",
"projectnumber": 455648594684,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
}
在侧栏菜单中将列出“名称”和“项目ID”。 当单击任何项目名称时,它应该显示详细的项目,例如项目名称,项目ID,项目编号,实例..etc等,这些都是我从JSON结果中获取的
这是我用于列出json项目的代码:
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div id="projectlist" class="sidebar-sticky">
<ul class="nav flex-column nav-pills">
{{range .Projects}}
<li class="nav-item" >
<a name="{{.ProjectID}}" class="nav-link" href="#">
<img class="img-fluid" style="width:8%"
src="static/image/generic_gcp.png">
{{.Name}}
<div>
<small>
ProjectId: {{.ProjectID}}
</small>
</div>
</a>
</li>
{{end}}
</ul>
<!-- Might need this seperator
<h6 class="sidebar-heading d-flex justify-content-between align-items-
center px-3 mt-4 mb-1 text-muted">
<span>Savings Reports</span>
</h6>
-->
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
{{range .Projects}}
<div id={{.ProjectID}} class="d-none justify-content-between flex-wrap
flex-md-nowrap align-items-center pb-2 mb-3 border-bottom ">
<h1 class="h2">Project:{{.Name}}</h1>
<!-- This pushes right
<div class="btn-toolbar mb-2 mb-md-0"> </div>
-->
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button
groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">Compute API
Enabled</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">Service Account
Key</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">Other Errors</button>
</div>
</div>
这是我尝试过的javascript代码:
<script>
$(function() {
$( 'ul.nav a' ).on( 'click', function() {
var pjname = $( this ).attr('name');
$( this ).parent().parent().find( 'a.active' ).removeClass( 'active'
);
$( this ).addClass( 'active' );
$('#'+pjname).toggleClass( 'd-none');
});
});
</script>
<script>
var btnContainer = document.getElementById("projectlist")
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
现在,我正在获取选定的项目详细信息,但是当从侧栏中单击下一个项目时,它将另外显示先前单击的项目详细信息。 如何仅显示所选项目的详细信息?
谁能帮我这个忙,过去的一天我几乎在挣扎中!!!
将通用类添加到项目说明div。 例如-“正确的内容”
更改
从
<div id={{.ProjectID}} class="d-none justify-content-between flex-wrap
flex-md-nowrap align-items-center pb-2 mb-3 border-bottom ">
至
<div id={{.ProjectID}} class="d-none justify-content-between flex-wrap
flex-md-nowrap align-items-center pb-2 mb-3 border-bottom right-content">
下面的方式没有改变js
从
<script>
$(function() {
$( 'ul.nav a' ).on( 'click', function() {
var pjname = $( this ).attr('name');
$( this ).parent().parent().find( 'a.active' ).removeClass( 'active'
);
$( this ).addClass( 'active' );
$('#'+pjname).toggleClass( 'd-none');
});
});
</script>
至
<script>
$(function() {
$('ul.nav a').on('click', function() {
var pjname = $(this).attr('name');
$(this).parent().parent().find('a.active').removeClass('active');
$(this).addClass('active');
$('.right-content').removeClass('d-none');
$(".right-content:not(#" + pjname + ")").addClass('d-none');
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.