Question

我想在点击按钮时执行显示和隐藏。我有以下代码。我想在点击“merge(options?: RequestOptionsArgs): RequestOptions { console.log("options header = " + options.headers); //this prints null console.log("options body = " + options.body); var newOptions = super.merge(options); if(from header equal to 'photo-upload'){ newOptions.headers.set('Content-Type', ''); }else{ newOptions.headers.set('Content-Type', 'application/json'); } let hdr = this._globals.getAuthorization(); newOptions.headers.set("Authorization", hdr); return newOptions; }”按钮时在我的“color:red”内容上显示或应用我的CSS样式（maindiv）。再次，如果我点击Click按钮，那么它应该隐藏或显示它像以前一样的正常内容（即没有任何css样式的红色），就像它应该来的那样。

Click

Fiddle

HTML：

Getting error: TypeError: Cannot read property 'classList' of null

JS：

<div ng-app="app">
    <div ng-controller="MainController">
    <div id="maindiv">
    <p>Test Content</p>
    </div>
       <div id="mainContainer">
          <div id="testId">
              <button type="button"  ng-click="testExpand()">Click</button>
          </div>
        </div>
  </div>
</div>

Answer 1

尝试angularjs方式。

angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {        
$scope.testExpand = function(){
			//alert("testExpand is called to show");
			$scope.applyCss = !$scope.applyCss;    		
		}
         }]);

.maindivColor {
  color:red;
}

.mainContainer {
  border-right: 1px solid #333;
}

#testId {
//  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="MainController">
    <div ng-class="{'maindivColor':applyCss}"><p>Normal Content</p></div>
    <div ng-show="applyCss" ng-class="{'maindivColor':applyCss}">
    <p>
    Test Content
    </p>
    </div>
       <div>
         
              <button type="button"  ng-click="testExpand()">Click</button>
          
		</div>
  </div>
</div>

Answer 2

试试这个

<!DOCTYPE html>
<html>
<head>
  <script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
  <script type="text/javascript">
    var app = angular.module('myApp', []);

    app.controller('surveyController', function($scope){
      $scope.backgroundColor = 'yellow';


      $scope.changeStyle = function(){
        if ($scope.backgroundColor == 'red') {
          $scope.backgroundColor = 'yellow';
        }else{
          $scope.backgroundColor = 'red';
        }
      }


    });


  </script>
</head>
<body ng-controller="surveyController" ng-app="myApp">
  <div id="maindiv" ng-style="{background: backgroundColor}">
    <p>Test Content</p>
  </div>
  <div id="mainContainer">
  </div>
  <button ng-click="changeStyle()">Change Style</button>
</body>
</html>

Answer 3

您应该使用angular方式动态添加CSS类，可以使用ngClass指令

来实现

ngClass指令允许您通过数据绑定表示要添加的所有类的表达式，在HTML元素上动态设置CSS类。

<div id="maindiv" ng-class="{'maindivColor' : hideMainDiv }">

控制器的

$scope.testExpand = function(){
    alert("testExpand is called to show");
    $scope.hideMainDiv = !$scope.hideMainDiv;
}

angular.module('app', []).
controller('MainController', ['$scope', function($scope) {
  $scope.testExpand = function() {
    console.log("testExpand is called to hide");
    $scope.hideMainDiv = !$scope.hideMainDiv;
  }
}]);

.maindivColor {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MainController">
    <div id="maindiv" ng-class="{'maindivColor' : hideMainDiv }">
      <p>Test Content</p>
    </div>
    <div id="mainContainer">
      <div id="testId">
        <button type="button" ng-click="testExpand()">Click</button>
      </div>
    </div>
  </div>
</div>

Answer 4

只需添加#

即可

document.querySelector("#maindiv").classList.toggle("maindivColor");

并使用toggle代替add

Answer 5

＆＃13;

angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
    
  $scope.testExpand = function(){
			alert("testExpand is called to show");
      var myEl = angular.element( document.querySelector( '#maindiv' ) );
			    
     if(myEl.hasClass('maindivColor')){
  
     myEl.removeClass('maindivColor');
    
    }else{
    myEl.addClass('maindivColor');
    }
			
		
		}
  
  
}]);

＆＃13;

.maindivColor {
  color:red;
}

.mainContainer {
  border-right: 1px solid #333;
}

#testId {
//  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="MainController">
    <div id="maindiv">
    <p>
    Test Content
    </p>
    </div>
       <div id="mainContainer">
          <div id="testId">
              <button type="button"  ng-click="testExpand()">Click</button>
          </div>
		</div>
  </div>
</div>

＆＃13;

Answer 6

这里最好的建议是：使用棱角分明的东西来做角度的工作。你变得越快，越好＃39;有了这个，就越好。你可以添加一个＆＃39;样式＆＃39;控制器中的变量：

angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
      $scope.style = {};
      $scope.testExpand = function(){
            alert("testExpand is called to show");
            if ($scope.style.color)
                $scope.style.color = red;
            else delete $scope.style.color;
        } 
}]);

然后你就这样简单地修改你的HTML：

<div ng-app="app">
    <div ng-controller="MainController">
    <div ng-style="style">
    <p>Test Content</p>
    </div>
       <div id="mainContainer">
          <div id="testId">
              <button type="button" ng-click="testExpand()">Click</button>
          </div>
        </div>
  </div>
</div>

Answer 7

您可以通过以下方式使用JQuery。

$(document).find('.yourButton').hide();

如何在按钮点击上应用显示和隐藏？

7 个答案: