gpt4 book ai didi

javascript - 根据哈希值更改单击时按钮的颜色

转载 作者:太空宇宙 更新时间:2023-11-04 16:00:38 24 4
gpt4 key购买 nike

我有三个按钮,当用户单击按钮时,按钮的背景颜色应该根据哈希值进行更改,因为我在这里使用了路由概念。

这是我写的HTML

  <body ng-controller="mainController">
<ul class="list-group">
<a ng-href="#/"><li class="list-group-item" ng-class="{'red': x=='#/'}" ng-click="showLocation()" >Home</li></a>
<a ng-href="#/Second-page"><li class="list-group-item" ng-class="{'red': x=='#/Second-page'}" ng-click="showLocation()" >Second page</li></a>
<a ng-href="#/Third-page"><li class="list-group-item" ng-class="{'red': x=='#/Third-page'}" ng-click="showLocation()" >Third page</li></a>
</ul>
</body>

CSS:

          .list-group-item.red{
background-color: red;
color: white;
padding: 10px;
}

JS:

var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(function($routeProvider){

$routeProvider

.when("/", {
templateUrl: "main.html",
controller: "mainController"
})
.when("/Second-page", {
templateUrl: "Second.html",
controller: "mainController"
})
.when("/Second-page/:num", {
templateUrl: "Second.html",
controller: "mainController"
})
.when("/Third-page", {
templateUrl: "Third.html",
controller: "secondController"
})
.when("/Third-page/:num", {
templateUrl: "Third.html",
controller: "secondController"
})

});

myApp.controller("mainController", ["$scope", "serviceName", "$routeParams", "$location", function($scope, serviceName, $routeParams){
$scope.x = window.location.hash;
$scope.showLocation = function(){
$scope.x = window.location.hash;
}

我的问题是 location.hash 无法正常工作。单击按钮时我得到了以前的哈希值。

例如,当我单击第一个按钮时,什么也没有发生,当我单击第二个按钮时,第一个按钮的哈希值被获取,并且第一个按钮被单击。现在,当我单击第三个按钮时,将采用前一个哈希值(即第二个按钮的哈希值),并且第二个按钮将突出显示。

CSS 正在应用于先前的哈希值。

谁能帮我澄清一下,我真的很困惑到底发生了什么。预先感谢:)

最佳答案

Angular 有时工作得“太快”,以至于其他代码无法“听到”某些更改。

为了解决这个问题,您可以在代码中添加 0 长度的 $timeout ,以便它等到下一个摘要周期执行。

myApp.controller("mainController", ["$scope", "serviceName", "$routeParams", "$location", "$timeout", function($scope, serviceName, $routeParams, $location, $timeout){
$scope.x = window.location.hash;
$scope.showLocation = function(){
$timeout(function(){
$scope.x = window.location.hash;
});
}
}]);

关于javascript - 根据哈希值更改单击时按钮的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42311893/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com