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

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 的函数，它获取被点击的元素。由于我需要将样式应用于“li”元素，因此我将单击元素的父级（在这种情况下为“a”），但它不起作用。我的代码有问题。如有任何帮助，我们将不胜感激。

谢谢！！

Answer 1

我可能会对此采取不同的方法，因为它使用 angular，但快速而肮脏的 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>