如何在angularjs上定位mouseover上的當前元素？

我想在縮略圖上顯示一個自定義圖標。所以在我的例子中，「上傳拇指」是我的拇指，我的自定義圖標是跨度。如何在angularjs上定位mouseover上的當前元素？

問題是，我不知道如何定位目前懸停的縮略圖，因爲我有一些這些動態生成。正如我現在所看到的，當懸停所有的跨度圖標時。

<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; 
    };

不知道爲什麼，但斌掙扎了一會兒。謝謝。

來源

2017-04-10 funguy

是的，但代碼應該如何看起來像event.target？ – funguy

您可以使用CSS實現它，即'.upload-thumb span.delete-media：hover {color：red}' – Satpal

它比這更復雜。跨度默認情況下不可見。一些我如何分配this.hoverEdit = true;僅限於當前懸停的項目。 – funguy

下面是一個示例代碼段檢索你的元素，做任何你想做的事情：

angular.module('app', []); 
 

 
angular.module('app') 
 
.controller('ExampleController', ['$scope', function($scope) { 
 

 
\t $scope.hoverIn = function(event){ 
 
\t  // this.hoverEdit = true; 
 
\t  var el = getElement(event); 
 
\t  // Do something with element, for example add a class 
 
\t  el.addClass('myClass'); 
 
\t  console.log('hoverIn ' + el); 
 
\t }; 
 

 
\t $scope.hoverOut = function(event){ 
 
\t  // this.hoverEdit = false; 
 
\t  var el = getElement(event); 
 
\t  // Do something with element, for example remove a class 
 
\t  el.removeClass('myClass'); 
 
\t  console.log('hoverOut ' + el); 
 
\t }; 
 

 
\t function getElement(event) { 
 
\t \t return angular.element(event.srcElement || event.target); 
 
\t } 
 

 
}]);

<!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"> 
 
\t <div ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb1</div> 
 
\t <div ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb2</div> 
 
</body> 
 
</html>

編輯：下面是另一個樣操作前一個兄弟（從文章作者的其他要求）

angular.module('app', []); 
 

 
angular.module('app') 
 
.controller('ExampleController', ['$scope', function($scope) { 
 

 
\t $scope.hoverIn = function(event){ 
 
\t  var el = getElement(event); 
 
\t  var previousElement = el.previousElementSibling; 
 
\t  if(previousElement) { 
 
\t  \t angular.element(previousElement).addClass('myClass'); 
 
\t  } 
 
\t }; 
 

 
\t $scope.hoverOut = function(event){ 
 
\t  var el = getElement(event); 
 
\t  var previousElement = el.previousElementSibling; 
 
\t  if(previousElement) { 
 
\t  \t angular.element(previousElement).removeClass('myClass'); 
 
\t  } 
 
\t }; 
 

 
\t function getElement(event) { 
 
\t \t return event.srcElement || event.target; 
 
\t } 
 

 
}]);

<!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> 
 
\t <li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb1</li> 
 
\t <li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb2</li> 
 
\t <li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb3</li> 
 
\t <li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb4</li> 
 
\t <li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb5</li> 
 
</ul> 
 

 
</body> 
 
</html>

來源

2017-04-10 11:19:10

這實際上可能工作，但還不確定如何動態生成data = thumbid與一個遞增的數字，因爲我這樣動態生成這個HTML：var newelement = $ compile（'

'）（$ scope）; – funguy

好吧，我沒有這個信息^^我改變了我的代碼片段，這樣你就可以檢索元素並做任何你想做的事情;） –

最後一點。類必須適用於以前的兄弟姐妹。如果我能得到這個例子將工作。 – funguy

不知道這是你在找什麼。但是你可以隱藏使用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>

來源

2017-04-10 11:16:02

在您的hoverIn函數中，嘗試使用event.currentTarget而不是this。可能解決問題。

來源

2017-04-10 11:36:32

如何在angularjs上定位mouseover上的當前元素？

回答

相關問題