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

Question

我有一个带有 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 并且我必须隐藏所有其他 .. 如何做到这一点

Answer 1

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