用 id 在 'a' 中用 id 在 div 中用 id 替换 span 的类答案

【问题标题】：replace class of a span by id inside a 'a' by id inside a div by id用 id 在 'a' 中用 id 在 div 中用 id 替换 span 的类
【发布时间】：2014-12-24 01:28:46
【问题描述】：

我正在尝试替换“div”元素内的“a”元素内的“span”元素的类。

我有这个 div：

<div id="songList" ng-repeat="el in tracksList">
<a ng-click="playSelectedSong($index)" class="list-group-item" id="{{$index}}"><h4 class="list-group-item-heading"><span id="playStopSpan" class="glyphicon glyphicon-play"></span>{{el.title}}</h4><p class="list-group-item-text"><span class="glyphicon glyphicon-stats"></span>Stats: <span class="glyphicon glyphicon-play"></span> {{el.playback_count}} </p></a>

并且我想用 ID playStopSpan 替换 span 元素中的类。

据我了解，我的文档树是： Div-->a-->span 用于tracksList 中的每个元素。

我尝试了几种方法，但还没有成功。到目前为止，我有这个：

$("#songList > #"+songNr+" > span#playStopSpan").removeClass().addClass("glyphicon glyphicon-pause");

songNr 是 ng-click 中 ($index) 的值。

【问题讨论】：

使用 ng-class docs.angularjs.org/api/ng/directive/ngClass 而不是在控制器中混入 jquery dom 操作。
当然！愚蠢的我，忘记了关于 ng-class 的一切。

标签： jquery angularjs

【解决方案1】：

这是使用 ng-class 的方式：

<span class="glyphicon" ng-class="{ 'glyphicon-pause': el.paused, 'glyphicon-play': !el.paused}">

  $scope.tracksList = [
      {paused: true, title: 'First song', playback_count: 0}
    ];

  $scope.togglePause = function (track) {
    track.paused = !track.paused;
  }

在演示中，如果没有播放，播放会被交叉。

http://plnkr.co/edit/UNcnBUP7eGewI7YRAOHU?p=preview

【讨论】：

嗯，差不多就是这样，但我没有在我的问题中提出条件，所以你不可能知道这一点。我需要检查 el $index 是否等于 selectedIndex 的条件。所以我只是把 $scope.selectedIndex 放在我的指令控制器中，并将条件 [$index==selectedIndex] 添加到我的 ng-class 中。无论如何，谢谢，你让我走上了正轨。