作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有许多按钮,用户可以单击它们来回答问题。有些按钮是正确答案,有些按钮是错误答案。如果该按钮的答案不正确,该按钮将保持事件状态,但计数器会增加对错误答案的计数。如果该按钮是正确答案,那么我想增加正确答案计数,更改按钮样式并禁用该按钮。代码片段(html):
<div class="container" ng-controller="myCtrl">
<div>
Right answers: {{ right_answers }}
</div>
<div>
Wrong answers: {{ wrong_answers }}
</div>
<button ng-style="answer1Style" ng-click="clickThis('answer1')" ng-disabled='answer1'> Answer1 </button>
<button ng-style="answer2Style" ng-click="clickThis('answer2')" ng-disabled='answer2'> Answer2 </button>
<button ng-style="answer3Style" ng-click="clickThis('answer3')" ng-disabled='answer3'> Answer3 </button>
<button ng-click="clickThis('wrong1')" ng-disabled='wrong1'> Wrong1 </button>
<button ng-click="clickThis('wrong2')" ng-disabled='wrong2'> Wrong2 </button>
<button ng-click="clickThis('whatever')" ng-disabled='whatever'> Whatever </button>
</div>
代码片段( Controller ):
var myCtrl = function($scope) {
$scope.right_answers = 0;
$scope.wrong_answers = 0;
$scope.answers = ['answer1','answer2','answer3'];
$scope.clickThis = function(answer) {
if ($scope.answers.indexOf(answer) != -1) {
$scope.right_answers += 1;
switch(answer){
case 'answer1':
$scope.answer1 = true;
$scope.answer1Style = {'background-color':'green', 'color':'white'};
break;
case 'answer2':
$scope.answer2 = true;
$scope.answer2Style = {'background-color':'green', 'color':'white'};
break;
case 'answer3':
$scope.answer3 = true;
$scope.answer3Style = {'background-color':'green', 'color':'white'};
break;
};
}
else {
$scope.wrong_answers += 1;
};
};
};
我的问题是,有没有一种方法可以使其更加通用,我不必使用 CASE 并为每个单独的答案包含 $scope 以便禁用它(或更改该问题的样式) ,即 ng-disabled="answer1"
、ng-disabled="answer2"
、$scope.answer1
、$scope。答案2?
?
谢谢!
最佳答案
您可以将 $event
对象作为 ngClick
指令的参数传递。
<button ng-click="clickThis($event, 'answer')"> Answer </button>
然后您将能够在 $scope.clickThis
函数中对目标元素进行操作
$scope.clickThis = function(event, answer) {
if ($scope.answers.indexOf(answer) != -1) {
$scope.rightAnswers += 1;
element = angular.element(event.target);
element.css({'color': 'white', 'background-color': 'green'});
element.prop('disabled', true)
} else {
$scope.wrongAnswers += 1;
};
}
示例:plnkr.co
关于javascript - 一般根据评估值禁用多个按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32827445/
我是一名优秀的程序员,十分优秀!