ng-Mousover, um nur das Element hovered nicht alle Elemente auszuwählen - mit ng-repeat

Ich muss hinzufügen und entfernen Sie eine Klasse zu einem Element bei mouseover. Die folgende Methode fügt Klassen aus allen Elementen mit dem Klassennamen .blogOverlay und .newOverlay hinzu und entfernt sie.ng-Mousover, um nur das Element hovered nicht alle Elemente auszuwählen - mit ng-repeat

Ich brauche es, um die Klasse NUR für das Element hinzuzufügen/zu entfernen, über das man schwebt.

JS:

$scope.showReadMore = function(){ 
    $('.blogOverlay').addClass("hidden"); 
    $('.newOverlay').removeClass('hidden'); 
} 
$scope.hideReadmore = function(){ 
    $('.blogOverlay').removeClass("hidden"); 
    $('.newOverlay').addClass('hidden'); 
}

HTML:

<div ng-if="!post.firstFeatured" class="col-sm-10 blog-content blogPreview" > 
          <a ng-click="goToPostDetail(post, $index)" > 
           <img class="img-responsive img-blog" ng-src="{{ post.fields.image.fields.file.url }}" width="100%" alt="" /> 
           <div class="blogOverlay" ng-mouseover="showReadMore()" ng-mouseleave="hideReadmore()"> 
            <h2>{{ post.fields.title }}</h2> 
           </div> 

           <div class="newOverlay hidden" ng-mouseover="showReadMore()" ng-mouseleave="hideReadmore()"> 
            <h2>{{ post.fields.title }}</h2> 
            <h3>{{post.fields.date}}</h3> 
            <a class="btn btn-primary readmore" ng-click="goToPostDetail(post, $index)">Read More</a> 
           </div> 
          </a> 
         </div>

Quelle

2016-12-01 NiBu

es scheint, dass Sie jquery verwenden? Wieso ist es so? – Aravind

@Aravind offen für andere Vorschläge – NiBu

Aktualisieren Sie Ihre CSS-Klassen? und JSON-Werte – Aravind

Es besteht keine Notwendigkeit Jquery zu verwenden. Verwenden Sie einfach ng-class und fügen Sie eine Bedingung hinzu, um diese Klasse Ihrem Beitrag anzuzeigen oder auszublenden. Ich snipped, wie Inhalte mit der versteckten Klasse gezeigt oder verborgen sind nach Eigenschaft post.readMore in der Steuerung

angular.module('myapp', []) 
 
    .controller('foo', function($scope) { 
 

 
    $scope.post = { 
 
     readMore: true, 
 
     fields: { 
 
     title: 'The post title', 
 
     date: new Date() 
 
     } 
 
    } 
 

 
    $scope.showReadMore = function(post) { 
 
     post.readMore = true; 
 
    } 
 
    $scope.hideReadmore = function(post) { 
 
     post.readMore = false; 
 
    } 
 

 

 
    });

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
    <style type="text/css"> 
 
    .hidden { 
 
     display: none; 
 
    } 
 
    </style> 
 

 
</head> 
 

 
<body ng-app="myapp"> 
 
    <div ng-controller="foo"> 
 

 
    <div ng-if="!post.firstFeatured" class="col-sm-10 blog-content blogPreview" style="max-width: 400px"> 
 
     <a ng-click="goToPostDetail(post, $index)"> 
 
     <img class="img-responsive img-blog" ng-src="{{ post.fields.image.fields.file.url }}" width="100%" alt="" /> 
 

 
     <div class="blogOverlay" ng-class="{'hidden' : !post.readMore}" ng-mouseover="showReadMore(post)" ng-mouseleave="hideReadmore(post)"> 
 
      <h2>{{ post.fields.title }}</h2> 
 
     </div> 
 

 
     <div class="newOverlay" ng-class="{'hidden' : post.readMore}" ng-mouseleave="showReadMore(post)" ng-mouseover="hideReadmore(post)"> 
 
      <h2>{{ post.fields.title }}</h2> 
 
      <h3>{{post.fields.date}}</h3> 
 
      <a class="btn btn-primary readmore" ng-click="goToPostDetail(post, $index)">Read More</a> 
 
     </div> 
 

 
     </a> 
 
    </div> 
 

 
    </div> 
 

 

 
</body> 
 

 
</html>

Quelle

2016-12-01 01:54:36 lealceldeiro

Danke !! Es funktioniert. Stört es Sie zu erklären, was der Zweck von 'Felder: { Titel: 'Der Beitrag Titel', Datum: neues Datum() }' – NiBu

Kein bestimmter Zweck. Nur um diese Attribute auszufüllen, geben Sie einfach Ihren Code ein (in der Frage) und geben Ihnen die Möglichkeit zu sehen, wie diese Eigenschaften von * post * bei mouseover und mouseleave angezeigt und versteckt wurden :) – lealceldeiro

geben Klassennamen so etwas wie class="blogOverlay_{{$index}}" und passieren $index JavaScript dann wie showReadMore($index)

Auf diese Weise sind Ihre Klassennamen einzigartig und sie werden Ändern Sie nur für index Sie möchten

ändern

Quelle

2016-12-01 01:33:05

Was ist der einfachste Weg zu vermeiden "blogOverlay _ {{$ index}}" Auswirkungen der CSS, die bereits vorhanden ist für blogOverlay – NiBu

Sie können neue Klasse erstellen, die keinen Stil in CSS hat. Nur um das unauffällig zu bekommen. Fügen Sie es dann als jquery selectore zum Hinzufügen/Entfernen ausgeblendeter Klasse –

bekommen "unrecognized Ausdruck $ index" – NiBu

Sie zu komplizieren brauchen nicht viel Überprüfen Sie die unten CSS und Live Plunker aus

.blue{ 

    background-color:blue; 
} 
.red{ 

    background-color:red; 
} 
.blue:hover 
{ 

    background-color:yellow; 
    visibility:hidden 
}

PLUNKER DEMO

Update 1: Blendet

Quelle

2016-12-01 01:33:55 Aravind

Ich verstehe, wie das funktioniert, aber das Problem, das ich habe, ist das Hinzufügen und Entfernen von Klassen. – NiBu

Warum möchten Sie eine Klasse hinzufügen oder entfernen? – Aravind

Ich muss die Klasse, die im div verborgen ist, mit dem Inhalt entfernen, den ich anzeigen muss. und füge dem div eine versteckte Klasse mit dem Inhalt hinzu, den ich verstecken möchte. Ihre abgetötete Hintergrundfarbe ändert sich – NiBu

ng-Mousover, um nur das Element hovered nicht alle Elemente auszuwählen - mit ng-repeat

Antwort

Verwandte Themen