Home / Questions / 133530
Accepted
zerokira
Asked: 2020-01-25 13:13:35 +0800 CST 2020-01-25 13:13:35 +0800 CST

单击AngularJS时将位置更改为div

  • 772

我正在尝试azul根据我击中的框来定位框click，即如果我击中click绿色框，则蓝色框必须向下到绿色框所在的位置，它不能在顶部，它必须像我放置的财产或类似top: 500px;的css东西。

<html>
   <head>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
   </head>

   <script>
    var app = angular.module("myApp", []); 
    app.controller("myCtrl", function($scope) {

        $scope.showFuncion = function() {
          $scope.showDiv = true;
          $scope.fafa = !$scope.fafa
        }
    });
    </script>
   
    <body ng-app="myApp" ng-controller="myCtrl"> 
      <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6">
          <div style="height: 150px; background-color: red;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: yellow;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: green;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: pink;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: black;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
        </div>
        <div class="col-sm-6 col-md-6 col-xs-6" ng-cloak ng-if="showDiv && fafa">
          <div style="height: 150px; background-color: blue;">
            ESTE ES EL LADO IZQUEIRDO DE LA PANTALLA
          </div>
        </div>
      </div>
      </div>


   </body>
</html>

这是offsetTop在 0 中显示的错误

javascript

1 Answers

  1. Best Answer

    我对您的代码进行了以下更改：

    1. 我已$event在从ng-click. 这样我们就可以读取被点击的元素。
    2. 对于我们想要定位的元素，我添加了一个ng-style（带有值“myStyle”），并且在 CSS 样式中我放置了一个相对位置（以便在更改top它时它会移动。
    3. 在被调用的函数中，我读取了被点击的元素（使用$event.currentTarget）并查看它位于上方的哪个位置（使用offsetTop）。
    4. 最后，我更改miEstilo为指定与top单击元素一样多的像素的值。

    代码如下所示：

    <html>
   <head>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
   </head>

   <script>
    var app = angular.module("myApp", []); 
    app.controller("myCtrl", function($scope) {

        $scope.showFuncion = function($event) {

          $scope.miEstilo = {'top': $event.currentTarget.offsetTop + 'px'}
          $scope.showDiv = true;
          $scope.fafa = !$scope.fafa
        }
    });
    </script>
   
    <body ng-app="myApp" ng-controller="myCtrl"> 
      <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6">
          <div style="height: 150px; background-color: red;" ng-click="showFuncion($event)">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: yellow;" ng-click="showFuncion($event)">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: green;" ng-click="showFuncion($event)">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: pink;" ng-click="showFuncion($event)">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: black;" ng-click="showFuncion($event)">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
        </div>
        <div class="col-sm-6 col-md-6 col-xs-6" ng-cloak ng-if="showDiv && fafa">
          <div ng-style="miEstilo" style="height: 150px; background-color: blue; position: relative;">
            ESTE ES EL LADO IZQUEIRDO DE LA PANTALLA
          </div>
        </div>
      </div>
      </div>


   </body>
</html>

    • 3