Question

我想在缩略图上显示自定义图标。所以在我的例子中，“upload-thumb”是我的拇指，我的自定义图标是span。

问题在于我不确定如何定位当前悬停的缩略图，因为我有一些动态生成的。正如我现在所看到的那样，当所有跨度图标都显示出来时。

 <div class="upload-thumb" ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)"><span class="delete-media" ng-show="hoverEdit"><i class="mdi mdi-delete"></i></span></div>

  $scope.hoverIn = function(event){
    //  this.hoverEdit = true;
  };

$scope.hoverOut = function(event){
    //  this.hoverEdit = false;
  };

不知道为什么，但是bin挣扎了一段时间。感谢。

Answer 1

以下是检索元素并使用它执行任何操作的示例代码段：

angular.module('app', []);

angular.module('app')
.controller('ExampleController', ['$scope', function($scope) {

	$scope.hoverIn = function(event){
	    //  this.hoverEdit = true;
	    var el = getElement(event);
	    // Do something with element, for example add a class
	    el.addClass('myClass');
	    console.log('hoverIn ' + el);
	  };

	$scope.hoverOut = function(event){
	    //  this.hoverEdit = false;
	    var el = getElement(event);
	    // Do something with element, for example remove a class
	    el.removeClass('myClass');
	    console.log('hoverOut ' + el);
	  };

	function getElement(event) {
		return angular.element(event.srcElement || event.target);
	}

}]);

<!doctype html>

<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
  <script src="script.js"></script>
  <style>
  .myClass { color: blue;  }
  </style>
</head>
 
<body ng-controller="ExampleController">
	<div ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb1</div>
	<div ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb2</div>
</body>
</html>

编辑：以下是操纵上一个兄弟的另一个示例（来自帖子作者的其他请求）

angular.module('app', []);

angular.module('app')
.controller('ExampleController', ['$scope', function($scope) {

	$scope.hoverIn = function(event){
	    var el = getElement(event);
	    var previousElement = el.previousElementSibling;
	    if(previousElement) {
	    	angular.element(previousElement).addClass('myClass');
	    }
	  };

	$scope.hoverOut = function(event){
	    var el = getElement(event);
	    var previousElement = el.previousElementSibling;
	    if(previousElement) {
	    	angular.element(previousElement).removeClass('myClass');
	    }
	  };

	function getElement(event) {
		return event.srcElement || event.target;
	}

}]);

<!doctype html>

<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
  <script src="script.js"></script>
  <style>
  li { margin: 12px; }
  .myClass { color: blue;  }
  </style>
</head>
 
<body ng-controller="ExampleController">

<ul>
	<li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb1</li>
	<li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb2</li>
	<li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb3</li>
	<li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb4</li>
	<li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb5</li>
</ul>

</body>
</html>

Answer 2

不确定这就是你要找的东西。但您可以使用even.childNodes

隐藏子内容

在html传递$event.target而不仅仅是事件

<div class="upload-thumb" ng-mouseover="hoverIn($event.target)" ng-mouseleave="hoverOut($event.target)">text   <span class="delete-media" >delete-icon</span></div>

然后你可以隐藏/显示相关的子节点

$scope.hoverIn = function(event){ 
       event.childNodes["1"].hidden = true 
      };

      $scope.hoverOut = function(event){ 
          event.childNodes["1"].hidden = false 
      };
Demo

angular.module("app",[])
.controller("ctrl",function($scope){
 
  $scope.hoverIn = function(event){ 
   event.childNodes["1"].hidden = true 
  };

  $scope.hoverOut = function(event){ 
      event.childNodes["1"].hidden = false 
  };
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div class="upload-thumb" ng-mouseover="hoverIn($event.target)" ng-mouseleave="hoverOut($event.target)">text   <span class="delete-media" >delete-icon</span></div>

  
</div>

Answer 3

在hoverIn功能中，尝试使用event.currentTarget代替this。可能会解决问题。

如何在angularjs中鼠标悬停时定位当前元素？

3 个答案: