如何正确切换图标按钮？答案

【问题标题】：How to toggle icon button properly?如何正确切换图标按钮？
【发布时间】：2022-01-04 06:55:04
【问题描述】：

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

<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");
    }
}

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

【问题讨论】：

美元在您的代码中存在冲突。
@Teemu 怎么解决？
$scope 在你的代码中。你在用 angularjs 吗？
api.jquery.com/jQuery.noConflict
@ArunSharma 是的

标签： javascript jquery css twitter-bootstrap bootstrap-4

【解决方案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>

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)
  }
});

【讨论】：

好的，非常感谢。