javascript - 单击或悬停/焦点时更改 Bootstrap 按钮颜色和类别

Question

1. 我有四个 Bootstrap 按钮，其上设置了 btn-primary 类。在悬停或聚焦时，我想更改按钮的颜色以显示悬停或聚焦时正在发生。

2. 单击按钮时，我想设置 btn-danger Bootstrap 类。我已经在按钮上附加了一个 ng-click 事件，所以不确定如何获取按钮的句柄并仅更改该按钮上的 css。我见过的例子有一个 jquery 点击事件处理程序，但不确定这是否是最好的方法

请您建议如何处理上述两个查询？

<div>
<br>
&nbsp;
<button type="button" class="btn  btn-primary" ng-click="pendingReqCtrl.loadData('Create')">Create Requests
       </button>
&nbsp;
<button type="button" class="btn  btn-primary" ng-click="pendingReqCtrl.loadData('Update')">Update Requests
       </button>
&nbsp;
<button type="button" class="btn  btn-primary" ng-click="pendingReqCtrl.loadData('Activate')">Activation
    Requests
       </button>
&nbsp;
<button type="button" class="btn  btn-primary" ng-click="pendingReqCtrl.loadData('Deactivate')">Deactivation
    Requests
       </button>
</div>

Answer 1

<button type="button" class="btn" ng-class="{ 'btn-primary': !pendingReqCtrl.isButtonHover,  'someClass': pendingReqCtrl.isButtonHover, 'btn-danger': pendingReqCtrl.isClick" ng-mouseover="onMouseOver(true)" ng-mouseleave="onMouseOver(false)" ng-click="pendingReqCtrl.loadData('Create')">Create Requests
   </button>

function onMouseOver(isHover){
    pendingReqCtrl.isButtonHover = isHover;
 }

function loadData(){
    pendingReqCtrl.isClick= true;
}

尝试这样的事情。