Question

我是角色新手并试图仅在当前链接上点击一个班级。但是点击它就可以处理所有链接。我希望它仅适用于当前元素。我们在jquery中使用（this）。

脚本：

var data = '<td  id="'+index+'" class="drag drop"><div class="ui-resizable tac"><div class="ui-resizable">' + header[index].description + '<br>' + header[index].name +'</div></div><div id="div'+index+'"  class="report-container" style="display:inline-block;float:left;"><ul class="report-list">';
            for( var key = 0; key < listTemp.length; key ++){
                data+= "<li  class='bg-l-grey' ng-class='{ opened:  selectedIndex == 0}' style='background:" + listTemp[key].color +"'><span><em class='left'>" + listTemp[key].mpValue + "</em><em class='right'>" + parseInt(listTemp[key].yield) + "</em></span>"+
                        '<div class="list-swiper bg-black" ng-click="selectedIndex = 0"><span class="swipe-left"></span><span class="swipe-right"></span></div><div class="report-icon-list bg-l-green"><a href="#" class="cht-doc"><span><i class="cht-sprite"></i></span></a><a href="#" class="cht-cam"><span><i class="cht-sprite"></i></span></a><a href="#" class="cht-add"><span><i class="cht-sprite"></i></span></a></div></li>';
            }
            data+= '</ul></div></td>';

$scope.openSwap = function($event) {
        // body...
        var elementParent = $event.currentTarget.parentElement.offsetParent;
        angular.element(elementParent).toggleClass("opened");
        if ($(elementParent).hasClass("opened")) {

        }else {
            console.log(false);
        }
        $event.stopPropagation();
    }

我想点击＆＃34; .list-swiper＆＃34;父李的类和类切换。

Answer 1

您可以切换课程并使用ng-class：

<div class="list-swiper bg-black" 
     ng-class="{ opened: thisElementClicked }" 
     ng-click="thisElementClicked = true">..</div>

这将添加一个类“打开”＆＃39;点击它时到div元素。

您当然也可以将ng-class添加到父级，这将在父级上添加该类：

<li ng-class="{ opened: thisElementClicked }">
    <div class="list-swiper bg-black" 
         ng-click="thisElementClicked = true">..</div>
</li>

您可能有多个li元素，您可能希望更动态地执行此操作：

<ul>
    <li ng-class="{ opened: selectedIndex == 0 }">
        <div class="list-swiper bg-black" 
             ng-click="openSwap(0)">..</div>
    </li>
    <li ng-class="{ opened: selectedIndex == 1 }">
        <div class="list-swiper bg-black" 
             ng-click="openSwap(1)">..</div>
    </li>
</ul>

控制器：

$scope.openSwap = function (index) {
    $scope.selectedIndex = index;
    // .. more
}

更简单，如果你可以动态构建li：

$scope.swipers = [
    { title: "first swiper"},
    { title: "second swiper"},
    // ..
}

$scope.openSwap = function (index) {
    $scope.selectedIndex = index;
    // or toggle, depends what you want:
    // if ($scope.selectedIndex == index) {
    //     $scope.selectedIndex = -1;
    // } else {
    //     $scope.selectedIndex = index;
    // }
}

视图：

<ul>
    <li ng-repeat="swiper in swipers"
        ng-class="{ opened: selectedIndex == $index }">
        <div class="list-swiper bg-black" 
             ng-click="openSwap($index)">{{ swiper.title }}</div>
    </li>
</ul>

Answer 2

＆＃34; jqLite＆＃34; （在angular.element页面上定义）提供DOM遍历方法，如parent()，contents()，find()，next()，{{1}} （但不是之前的）（））即可。没有类似选择器的方法。

您可以尝试核心JavaScript的querySelector，请点击链接：

https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

在jquery中你没有任何$（this）概念，你必须通过javascripts querySelector或angular.element（document）.find（...）或$ document.find遍历元素。（）

有关文档，请在下面的链接中找到结帐：

https://docs.angularjs.org/api/ng/function/angular.element

Answer 3

使用ng-class更改此特定链接上的课程。

<ANY class="ng-class: expression;"> ... </ANY>

如何使ng-click仅适用于click事件

3 个答案: