toggleClassの最終位置を変更するには

JQuery toggleClassを使用してプロジェクトを構築しようとしています。私はいくつかの最後のレコードのデータをフォローする位置をトグルします。この私のHTMLtoggleClassの最終位置を変更するには

<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からポジショントグルを作る方法がわかりません。この問題を解決するために私を助けてください。ありがとう

出典

2017-08-01 Nugka

@kindly更新作業タラe。 – Dhaarani

@Dhaarani何を意味するのですか？ – Nugka

$（ '。ユニーク'）またはトグルテキストオンを切り替える必要がある – Dhaarani

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>

出典

2017-08-01 09:06:55 Dhaarani

@Rizka Nugrohoこの回答を確認してください – Dhaarani

それはcorectly動作します。私を助けてくれて大変感謝しています:) – Nugka

@Rizka Nugrohoようこそ – Dhaarani

あなたは疑問が分かりませんが、これは私の推測です。

$('.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>

出典

2017-08-01 07:15:59 William

私の質問私はa-> tooggle-onとかa-> toggle-offのようないくつかのデータをトグルフォローで作ってほしい – Nugka

@RizkaNugrohoデフォルトの状態は何ですか？ – William

私のコードでは、デフォルトの状態のように、単純に私は$ scope.lastに従う$ scope.last = "b"の結果が常にロックされている場合、$ scope.lastに従うことをお奨めします – Nugka

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

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

<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>

出典

2017-08-01 08:06:49 Dhaarani

。 $ scope.last = "a" - > Lockedまたは$ scope.last = "b"または何でも - > Unlockedの場合 – Nugka

@Rizka Nugroho今すぐ確認してください。私は上記のコード – Dhaarani

を更新しました。スニペットを開くとまだロックされていましたが、$ scope.last = "a" - > Lockedまたは$ scope.last = "b"またはクリックなしでロックされていればスニペット位置トグルを実行します。おそらく私の質問は不明だ – Nugka

答えて

関連する問題