如何正确切换图标按钮？

Question

大家好，我有一个带有字体真棒图标的按钮。 我想使用 jQuery 或 Javacript 来切换该图标，什么都可以。 我试过 jQuery 但以前的图标没有从按钮中删除，新图标被切换了。 这是代码-

<button class="btn btn-primary" id="share_screen_button" ng-click="share_screen()"><i class="fas fa-desktop"></i></button>

$scope.share_screen=async () => {
    if ( $scope.roomObject === undefined) return;
    if (screenShareObj === undefined) {
        screenShareObj = await $scope.roomObject.createScreenShareObject();
       
            $("#share_screen_button").removeClass("fas fa-desktop");
            $("#share_screen_button").addClass("far fa-window-close");

    } else {
        screenShareObj.leave();
        screenShareObj = undefined;

        $("#share_screen_button").removeClass("far fa-window-close");
        $("#share_screen_button").addClass("fas fa-desktop");
    }
}

如何解决这个问题？ 请帮忙

Answer 1

当您使用 Angularjs 或任何其他框架时，请尽量避免直接操作。 让框架为你做。

HTML

<div ng-app="myApp" ng-controller="myCtrl">
  <button class="btn btn-primary" id="share_screen_button" ng-click="toggle()">
    <i ng-class="{'fas fa-desktop':which_class,'far fa-window-close':!which_class}"></i>
    </button>
</div>

JS

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope)
{
  $scope.which_class=true
  $scope.toggle = function()
  {
    $scope.which_class = !$scope.which_class
    console.log($scope.which_class)
  }
});