Question

我使用angular来编写Web应用程序。我有一个带有一些链接的顶部栏，我想在点击链接时将一个css类应用于该链接，并从其余链接中删除该类。

为此，我使用以下代码：

<div class="header">
    <ul class="nav nav-pills pull-right">
         <li ><a href="#/home" ng-click="clickedHeaderLink(this)">Home</a></li>
         <li ><a href="#/register" ng-click="clickedHeaderLink(this)">Sign in</a></li>
         <li ><a ng-controller="LoginController"  ng-click="clickedHeaderLink(this);open('sm')" >Login</a></li>
         <li ><a  href="#/contact" ng-click="clickedHeaderLink(this)">Contact</a></li>
    </ul>
    <h3 class="text-muted">Arena Club</h3>
</div>

然后我的控制器：

app.controller('AppController', ['$scope','$http','menuFactory',function($scope,$http,menuFactory) {

var _init=function()
{
    console.log('Starting Init AppController');

    $scope.selected=false;

    console.log('Finished Init AppController');
}

$scope.clickedHeaderLink=function(element)
{
    var parentElement=element.$parent;
    angular.element(parentElement).addClass("active");
}

正如您在我的控制器中看到的那样，我有一个名为clickedHeaderLink的函数，该函数使用单击的元素。因为我需要将风格应用于＆＃39; li＆＃39;元素，我点击了元素的父元素（在这种情况下＆＃39; a＆＃39;），但它不起作用。我的代码有问题。这里的任何帮助将不胜感激。

谢谢！

Answer 1

我可能会采用不同的方法，因为它使用了角度，但快速而又脏的jQuery选择器将是这样的：

$scope.clickedHeaderLink=function(element)
{
  $(element).parent().addClass('active').siblings().removeClass('active');
    //var parentElement=element.$parent;
    //angular.element(parentElement).addClass("active");
}

不同的解决方案可能是：

/*I would take a different approach and not use jQuery here. Especially since you're already using angular.*/

var menuItems = {};
['home', 'register', 'loginController', 'contact'].forEach(function(name) {
  menuItems[name] = {};
});
$scope.menuItems = menuItems;


app.controller('AppController', ['$scope','$http','menuFactory',function($scope, $http, menuFactory) {

  var _init=function() {
      console.log('Starting Init AppController');

      $scope.selected=false;

      console.log('Finished Init AppController');
  }

  $scope.clickedHeaderLink=function(element) {
    var x;
    var name = element.id;
    for (x in menuItems) {
      menuItems[x].active = (name !== x);
    }
      /*var parentElement=element.$parent;*/
      /*angular.element(parentElement).addClass("active");*/
  }

  // ...
});


// html
<div class="header">
    <ul class="nav nav-pills pull-right">
         <li ><a ng-class="{active: menuItems.home.active}" id="home" href="#/home" ng-click="clickedHeaderLink(this)">Home</a></li>
         <li ><a ng-class="{active: menuItems.register.active}" id="register" href="#/register" ng-click="clickedHeaderLink(this)">Sign in</a></li>
         <li ><a ng-class="{active: menuItems.loginController.active}" id="loginController" ng-controller="LoginController"  ng-click="clickedHeaderLink(this);open('sm')" >Login</a></li>
         <li ><a ng-class="{active: menuItems.contact.active}" id="contact" href="#/contact" ng-click="clickedHeaderLink(this)">Contact</a></li>
    </ul>
    <h3 class="text-muted">Arena Club</h3>
</div>

如何使用Jquery动态更改元素的css类？

1 个答案: