单击时更改动态按钮的 CSS答案

【问题标题】：Change CSS of dynamic button on click单击时更改动态按钮的 CSS
【发布时间】：2016-11-04 04:05:20
【问题描述】：

我有几个动态放置在 ng-repeat 中的按钮。我希望能够“选择”一个按钮。我的意思是当我点击一个时，它的 CSS 会发生变化。当我单击另一个按钮时，第一个按钮将恢复其原始 CSS，并选择新按钮。谁能帮帮我？

HTML：

<button ng-repeat="answer in regular_answers" ng-attr-id="{{'answer' + answer.regularAnswerId}}" class="button button-balanced button-block" ng-click="selectAnswer(answer)">
      {{answer.answer}}
</button>

JS：

$scope.selectAnswer = function (answer) {
    if (document.getElementById('answer' + answer.regularAnswerId).hasClass('button-selected')) {
      document.getElementById('answer' + answer.regularAnswerId).removeClass('button-selected');
      document.getElementById('answer' + answer.regularAnswerId).addClass('button-balanced');
    }
    else {
      document.getElementById('answer' + answer.regularAnswerId).removeClass('button-balanced');
      document.getElementById('answer' + answer.regularAnswerId).addClass('button-selected');


    }
  }

【问题讨论】：

您要使用单选按钮组吗？隐藏按钮，仅显示它们的标签，根据是否选择它们的按钮来设置标签的样式，例如input[type=radio]:checked + label ... 不使用 JavaScript 来控制演示。

标签： javascript html css angularjs ionic-framework

【解决方案1】：

使用 ng-class 指令而不是从控制器进行 DOM 操作（被认为是错误模式）。

标记

<button ng-repeat="answer in regular_answers" 
  ng-attr-id="{{'answer' + answer.regularAnswerId}}" 
  class="button" 
  ng-class="{'button-selected': answer.isSelcted, 'button-balanced': answer.isSelcted}"
  ng-click="answer.isSelected = !answer.isSelected">
      {{answer.answer}}
</button>

PS： 为了维护单个 ID，您应该将其保存在单个范围变量中。

<button ng-repeat="answer in regular_answers" 
  ng-attr-id="{{'answer' + answer.regularAnswerId}}" 
  class="button" 
  ng-class="{answer.regularAnswerId == selectedAnswerId ? 'button-selected': 'button-balanced'}"
  ng-click="selectAnswer(answer)">
      {{answer.answer}}
</button>

代码

$scope.selectAnswer = function(answer){
   $scope.selectedAnswerId = answer.regularAnswerId 
}

【讨论】：

Thanks, this works for selecting them, but it doesn't get deselected when a different one is selected?
@Ruben2112 现在看看更新的答案，谢谢 ;)

【解决方案2】：

当您使用 Angular 时，方法应该不同，您不会在事件发生后更改节点，而是节点应该响应数据更改：

<button ng-repeat="answer in regular_answers" class="button button-block" 
  ng-click="selectAnswer(answer)" 
  ng-class = "{buttonSelected:answer.regularAnswerId == selectedAnswer.regularAnswerId, 
             buttonBalanced: answer.regularAnswerId != selectedAnswer.regularAnswerId}">
      {{answer.answer}}
</button>

然后：

$scope.selectAnswer = function (answer) {
    $scope.selectedAnswer = answer;
}

请参阅此示例：http://codepen.io/sergio0983/pen/vyYNvy

编辑

添加了另一个我认为更简洁的 ng-class 用例的笔：

http://codepen.io/sergio0983/pen/VmweLP

<button ng-repeat="answer in regular_answers" 
 class="button button-block" 
 ng-click="selectAnswer(answer)" 
 ng-class = "answer.regularAnswerId == selectedAnswer.regularAnswerId ? 'button-selected' : 'button-balanced'">

【讨论】：