Question

我尝试使用JQuery toggleClass构建一些项目。我想让位置切换跟随一些最后的记录数据。这是我的 HTML

<div class="action-lock">
  <div class="toggle-pane">
    <div class='unique' id='switch'>
      <div class='toggle-text-off'>Unlocked</div>
      <div class='glow-comp'></div>
      <div class='toggle-button'></div>
      <div class='toggle-text-on'>Locked</div>
    </div>
  </div>
</div>

这个 JQuery

$scope.last = "a";
$('.unique').click(function (e) {
   e.preventDefault(); 
   if($scope.last == "b"){
       $(this).toggleClass('toggle-on');
   }else{
       $(this).toggleClass('toggle-off');
   }
});

我尝试但始终在Locked切换位置，我不知道如何从数据$scope.last进行位置切换。请帮我解决这个问题。感谢

Answer 1

var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.last = ""
$scope.toggleclick = function(last){
   debugger;
   if(last == "a"){       
       $(".toggle-text-on").toggleClass('toggle-on');
       $(".toggle-text-off").toggleClass('toggle-off');
   }else if(last != "a"){
       $(".toggle-text-on").toggleClass('toggle-off');
       $(".toggle-text-off").toggleClass('toggle-on');
   }
};
}]);

.toggle-text-off.toggle-on,.toggle-text-on.toggle-on{display:block;}
.toggle-text-off,.toggle-text-on{display:none;}
.maginbt10{margin-bottom:10px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="controllerName">
<div class="action-lock">
<input type="text" ng-model="last" name="mail"  class="maginbt10" />
  <div class="toggle-pane">
    <div class='unique' id='switch'>
      <div class='toggle-text-off' ng-class="{'toggle-on':last != 'a'}">Unlocked</div>
      <div class='glow-comp'></div>
      <div class='toggle-button'></div>
      <div class='toggle-text-on' ng-class="{'toggle-on':last == 'a'}">Locked</div>
    </div>
  </div>
</div>

</body>

Answer 2

你的问题并不清楚，但这是我对你的解释的猜测。

$('.unique').click(function (e) {
   e.preventDefault(); 
   $(this).toggleClass('toggle-on').toggleClass('toggle-off');

});

和html

<div class="action-lock">
  <div class="toggle-pane">
    <div class='unique toggle-on' id='switch'>
      <div class='toggle-text-off'>Unlocked</div>
      <div class='glow-comp'></div>
      <div class='toggle-button'></div>
      <div class='toggle-text-on'>Locked</div>
    </div>
  </div>
</div>

Answer 3

＆＃13;

var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.last = "a";
$scope.toggleclick = function(){
   if($scope.last == "a"){
       $(".toggle-text-on").toggleClass('toggle-off');
       $(".toggle-text-off").toggleClass('toggle-on');
       $scope.last = "b";
   }else{
       $(".toggle-text-on").toggleClass('toggle-on');
       $(".toggle-text-off").toggleClass('toggle-off');
       $scope.last = "a";
   }
};
}]);

＆＃13;

.toggle-on,.toggle-text-off.toggle-on{display:block;}
.toggle-off,.toggle-text-off{display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="controllerName">
<div class="action-lock">
  <div class="toggle-pane">
    <div class='unique' id='switch'ng-click="toggleclick()">
      <div class='toggle-text-off' ng-click="toggleclick()">Unlocked</div>
      <div class='glow-comp'></div>
      <div class='toggle-button'></div>
      <div class='toggle-text-on' ng-click="toggleclick()">Locked</div>
    </div>
  </div>
</div>

</body>

＆＃13;

如何更改toggleClass中的最后位置

3 个答案: