时间戳

首页 > 解决方案 > 如何根据 id 显示特定的 div，id 将是动态的

javascript - 如何根据 id 显示特定的 div，id 将是动态的

问题描述

我有带有 id 的 div 列表，它将根据页数生成在此处输入图像描述

现在我必须显示 pageContainer1 和 pageContainer6 它可能会有所不同。

  $scope.comment_pg_filter = function(){
        $scope.page_id=[];
       $http.post('/getcommentlist',{file_id : $scope.file_id}).then(function(response){
                     console.log(response)
                     if(response.data != null){
                         $scope.comments = response.data;
                        //  $scope.comments_length = $scope.comments.length;
                         console.log($scope.comments)
                         angular.forEach($scope.comments,function(comments_pg){
                             console.log(comments_pg.pageNumber);
                             $scope.page_id.push("#pageContainer"+comments_pg.pageNumber)

                         })
                      console.log($scope.page_id) // Here am getting ['pageContainer1','pageContainer6']
                     }
       })

    }

现在我必须单独显示这两个 div，我必须隐藏所有其他 .. 怎么做

标签： javascriptjqueryhtmlcss

解决方案

使用ng-show. 您可以将模板更新为以下内容。

<div id="pageContainer1" data-ng-show="page_id.indexOf('pageContainer1') !== -1">...</div>
<div id="pageContainer2" data-ng-show="page_id.indexOf('pageContainer2') !== -1">...</div>
<div id="pageContainer6" data-ng-show="page_id.indexOf('pageContainer6') !== -1">...</div>

编辑

无需编辑 html，使用 Javascript

let ids = ["container1", "container4"];
document.querySelectorAll(".page").forEach(el => el.style.display = ids.includes(el.id) ? 'display' : 'none');
<div class="page" id="container1">Container 1</div>
<div class="page" id="container2">Container 2</div>
<div class="page" id="container3">Container 3</div>
<div class="page" id="container4">Container 4</div>
<div class="page" id="container5">Container 5</div>

推荐阅读