Question

这是tbody中的tr标签 - （显示大约20行，在循环中）

<tr class="rowClass" ng-click="$ctrl.onRowClick(row[0]);" ng-class="" ng-repeat="row in $ctrl.rows track by $index">

默认情况下，它会在悬停时显示蓝色背景。单击一行会打开一个面板，我正在处理的是，如果我点击一行，它应显示一个稳定的蓝色背景，直到面板关闭。

所以onRowClick添加了newClass（带有纯蓝色背景） -

ctrl.onRowClick = function (row) {
    var myElement = angular.element( document.querySelector( '.rowClass' ) );
myElement.addClass('newClass');
}

closePanel删除newClass并返回默认的悬停类 -

function closePanel(){
    var myElement = angular.element( document.querySelector( '.rowClass' ) );
    myElement.removeClass('newClass');
}

（以上两个函数都在js控制器文件中）

这是我正在使用的css -

.detection-table .table>tbody>tr:hover{background-color: rgba(0, 147, 237, 0.1);}
.detection-table .table>tbody>tr.newClass{background-color: rgba(0, 147, 237, 0.1);}

让我烦恼的是，如果我点击任何一行，newClass会被触发，但总是只针对第一行，而不是我点击的特定行。我应该在 document.querySelector（＆＃39; .rowClass＆＃39;）中更改某些内容吗？

Answer 1

element.querySelector将返回与 DOM遍历顺序中的选择器匹配的第一个节点。您的元素是document。您不必总是在文档上调用它。您可以说anotherElem.querySelector(someSelector)或event.currentTarget.querySelector(someSelector)。在您的情况下，为什么不使用this或event.currentTarget？或者我非常想念一些东西。

document.querySelector总是选择第一行

1 个答案: