Question

问题

您好！我想在点击按钮时显示div，但问题是我有多个具有相同类的div，我不知道如何调用每个div ......

所以你如何在图像中看到我有2个列表“个人”和“杂货”，每个都有div“popup_information”。我想当我点击image1中的按钮时，div是可变的..不是两个都有，而只是在我按下按钮的那个列表中。就像当我按下列表底部的杂货列表上的按钮时，必须用按钮显示div。

CODE

HTML：

   <div ng-repeat="lists in listsdata.lists">

         <div id="DIV_24">
             <button onClick="document.getElementsByClassName('popup_information').style.visibility='visible'" id="MORE_BUTTON">:</button>
             <div class="popup_information">
             <a href=""> <button id="DELETE_BUTTON">X</button></a>
             <a href=""> <button id="EDIT_BUTTON">E</button></a>
                 </div>

             <a href="#/{{lists.id}}">
            <div id="DIV_25">
                {{lists.name}}
            </div>
            <div id="DIV_26">
            </div>
        </div></a>

    </div>

的CSS：

#DIV_24 > #MORE_BUTTON {
    padding: 5px 5px 5px 5px;
    background-color: #fbfbfb;
    border-radius: 5px;
    position: absolute;
    color: #666;
    font: normal 700 30px/1 "Calibri", sans-serif;
    text-align: center;
    right: 10px;
    top: 10px;
    border-color: transparent;
    visibility: hidden;
}

#DIV_24:hover > #MORE_BUTTON{
    visibility: visible;
    z-index: 200;
}

div.popup_information {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    height: 70px;
    background-color: #ffffff;
    visibility: hidden;
}

目前我不使用任何脚本，因为我现在不知道如何将该div称为我需要的..

我的想法

所以我的想法是在点击MORE_BUTTON时显示popup_information，但这对我来说并不是那么简单，因为可能有多个div有类“popup_information”，我不知道我需要做什么使用它们中的每一个..会很棒，如果有人可以更新我的CSS或编写脚本，我会感激不尽，因为我不明白它是如何工作的......

Answer 1

如果您使用此代码，它只会在父div中获取指定的类。

this.parentNode.getElementsByClassName('popup_information')[0]

在你的情况下是<div id="DIV_24">等。

......但JM杨的答案当然可能更合适，保持所有Angular

Answer 2

由于您使用的是Angular JS，因此可以以Angular方式优雅地完成。单击按钮时，您可以引入一个变量列表以指示是否应显示div，然后在div上使用ng-show引用该变量来确定它是应该显示还是隐藏。

  angular.module('test', [])
    .controller('MainCtrl', function($scope) {
      $scope.listsdata = {
        lists: [{id: 1, name: 'list 1'}, {id: 2, name: 'list 2'}, {id: 3, name: 'list 3'}]
      };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <div ng-app="test" ng-controller="MainCtrl">
    <div ng-repeat="lists in listsdata.lists">

      <div id="DIV_24">
        <button ng-click="lists.show = !lists.show">:</button>
        <div class="popup_information" ng-show="lists.show">
          <a href="">
            <button id="DELETE_BUTTON">X</button>
          </a>
          <a href="">
            <button id="EDIT_BUTTON">E</button>
          </a>
        </div>
        <a href="#/{{lists.id}}">
          <div id="DIV_25">
            {{lists.name}}
          </div>
          <div id="DIV_26">
          </div>
      </div>
      </a>
    </div>
  </div>

Answer 3

为了回答你的另外一个问题“当我点击外面某处按钮隐藏”时，我想你想要的是隐藏div.popup_information，当它打开并且用户点击它之外的某个地方。您可以使用自定义指令侦听文档onClick事件，并检查事件是否来自div.popup_information。如果不是并且div.popup_information已打开，则更改$ scope数据以隐藏它。下面的代码并不完美，但我希望它至少向您展示如何通过使用自定义指令来实现这一目标。

请注意我已经为$ .contains（）推出了jQuery。

angular.module('test', [])
  .controller('MainCtrl', function($scope) {
    $scope.listsdata = {
      lists: [{
        id: 1,
        name: 'list 1'
      }, {
        id: 2,
        name: 'list 2'
      }, {
        id: 3,
        name: 'list 3'
      }]
    };
  })
  .directive("closeOnOutsideClick", ['$document', function($document) {
    return {
      link: function($scope, $element, $attrs) {
        var $toHide = $element.find($attrs.closeOnOutsideClick);
        if ($toHide.length > 0) {
          $document.on("click", function(event) {
            if ($toHide.is(':visible') && !$.contains($element[0], event.target)) {
              $scope.lists.show = false;
              $scope.$apply();
            }
          })
        };
      }
    }
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <div ng-app="test" ng-controller="MainCtrl">
    <div ng-repeat="lists in listsdata.lists">

      <div id="DIV_24" close-on-outside-click="div.popup_information">
        <button ng-click="lists.show = !lists.show">:</button>
        <div class="popup_information" ng-show="lists.show">
          <a href="">
            <button id="DELETE_BUTTON">X</button>
          </a>
          <a href="">
            <button id="EDIT_BUTTON">E</button>
          </a>
        </div>
        <a href="#/{{lists.id}}">
          <div id="DIV_25">
            {{lists.name}}
          </div>
          <div id="DIV_26">
          </div>
      </div>
      </a>
    </div>
  </div>

使用多个div

3 个答案: