Question

我想在点击时为元素添加一个额外的类名。如何添加？

我正在尝试这种方式，但没有工作：

这是我的代码：

<div class="row designOption" ng-class="{'active':proDesign}" ng-class="{'activeShow':proDesignAdd}">
            <span ng-mouseenter="proDesign = true" ng-mouseleave="proDesign = false"  ng-click="categoriesAdd('proDesign')" class="icon iconD">D</span>
            <span class="info infoD">Design</span>
        </div>

我在这里洗牌active，点击后我需要添加activeShow如何做到这一点？

Answer 1

使用选择器在元素上添加类的语法。

$('selector').addClass("classname");

对于您的情况，如果您想为

添加课程

<span ng-mouseenter="proDesign = true" ng-mouseleave="proDesign = false"  ng-click="categoriesAdd('proDesign')" class="icon iconD">D</span>

然后尝试

    $('.iconD').click(function(){ 
         $('.iconD').addClass("activeShow");   
        // Or do whatever you wish to     
    });

有关

<span class="info infoD">Design</span>

尝试

    $('.infoD').click(function(){ 
         $('.infoD').addClass("activeShow");
        // Or do whatever you wish to     
    });

在这两种情况下，我都使用了span上现有的一个类作为选择器。

Answer 2

或者没有任何Jquery，你可以这样做：

Html：

<div class="row designOption" ng-class="{'active':proDesign , 'activeShow':proDesignAdd}">
   <span ng-mouseenter="proDesign = true" ng-mouseleave="proDesign = false"  ng-click="categoriesAdd('proDesign')" class="icon iconD">D</span>
   <span class="info infoD">Design</span>
</div>

您不需要2 ng课程，可以使用其中一个重新组合您要添加的所有课程。

控制器：

$scope.proDesign = true;
$scope.proDesignAdd = false;

$scope.categoriesAdd = function(value){
 //Do you stuff with value
   $scope. proDesignAdd = !$scope.proDesignAdd;
}

用鼠标进入/离开，您将管理第一个css。点击后，您将通过更改布尔值来管理第二个。

这是一个有效的Fiddle

Answer 3

您始终可以使用css实现此目的。

检查这个小提琴

http://plnkr.co/edit/JZhWlkNAkTILswKUIEN4

  <div class="first-div"> 
      Active of this div
    </div>
    <div class="second-div">
      Change Color of this div
    </div>

CSS

div {

  border: 1px solid black;
  margin: 100px;
}

div.first-div:active + div.second-div {

  background: red;
}

您需要确保IE在标准模式下运行 - 输入如下文档类型：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

如何在click上添加addtional类名，而不是angularjs中的`mouseenter'

3 个答案: