Question

这里我从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": ""
}

在侧栏菜单“name”＆amp; “项目ID”将列出。当点击任何项目名称时，它应显示详细项目，如项目名称，项目ID，项目编号，实例..我从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>

现在我正在获取所选的项目详细信息，但是当从侧栏单击下一个项目时，它还会显示之前单击的项目详细信息。如何单独显示所选项目详细信息？

任何人都可以帮助我解决这个问题，过去有一天我几乎要挣扎!!!

Answer 1

将公共类添加到项目描述div。例如 - ＆＃34;右内容＆＃34;

更改

这

<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>

如何从html中的侧栏菜单中选择项目详细信息？

1 个答案: