Question

所以我有一个div。

<div class="class" ng-click="example()"></div>

我正在使用angular 1.6.4和jQuery。此div具有背景颜色和边框颜色。当我点击这个div时，我想改变它们。我知道我可以这样做：

$scope.example = function(){
    $(".class").addClass("class_change");
};

OR

$scope.example = function(){
    $(".class").css("background-color", "white");
    $(".class").css("border-color", "red");
};

当我在同一页面上拥有该div的副本时，我的问题出现了，我只想让它更改我点击的div，而不是所有这些。

<div class="class" ng-click="example()"></div>
<div class="class" ng-click="example()"></div>
<div class="class" ng-click="example()"></div>
<div class="class" ng-click="example()"></div>

我原以为我可以使用$（this），但由于某种原因它无效。感谢。

Answer 1

尝试将id添加到div中以获得类似的内容：

<div class="class" id="myDiv-1" ng-click="example('myDiv-1')"></div>
<div class="class" id="myDiv-2" ng-click="example('myDiv-2')"></div>
<div class="class" id="myDiv-3" ng-click="example('myDiv-3')"></div>
<div class="class" id="myDiv-4" ng-click="example('myDiv-4')"></div>

然后将您的功能更改为：

$scope.example = function(myDiv){
    $("#" + myDiv).css("background-color", "white");
    $("#" + myDiv).css("border-color", "red");
};

Answer 2

来自AngularJS docs：

ngClick和ngFocus等指令在该表达式的范围内公开$ event对象。当jQuery存在或类似的jqLite对象时，该对象是jQuery事件对象的实例。

您可以像

一样传递它

<template name="User">
    <div class="col-md-12">

        <li class="user black {{selected}} results" id="user-link" style="font-family: 'candara'">
            <span class="name" style="color: black; font-family: 'candara'"><i class="fa fa-warning" style="color: red;"></i> {{newschoolnamevar}}</span>
            {{#if selected}}
                <hr>
                <div class="jokeInfo">
                    <div>
                        <span class="possy blue" style="color: black;">Motto: {{newschoolmottovar}}</span>
                    </div>
                    <br>
                    <div>
                        <span class="author" style="color: black;"> Author: {{author}}</span>
                    </div>
                    <br>
                    <div>
                        <span class="author" style="color: black;">Vision: {{newschholvisionvar}}</span>
                    </div>
                    <br>
                    <div>
                        <span class="author" style="color: black;">Mobile: {{mobile}}</span>
                    </div>
                    <br>
                    <div>
                        <span class="author" style="color: black;">Sell School: {{sellschoolvar}}</span>
                    </div>
                    <br>
                </div>
            {{/if}}
        </li>
    </div>
</template>

然后您可以在方法中阅读target property，如：

<div class="class" ng-click="example($event)"></div>

但是在AngularJS上下文之外操作DOM并不是一个好习惯。您可以使用ng-style directive有条件地设置元素的样式，您可以编写自己的指令，该指令可以存储元素的状态并应用样式。

更改css点击许多重复div之一？

2 个答案: