angualrjs动态添加类名动态改变css_angular js1.2.5 动态添加类名-CSDN博客

本文链接：https://blog.csdn.net/sinat_38992528/article/details/78730065

本文介绍了一个基于用户登录状态切换商品收藏图标的功能实现方法。当用户未登录时，点击收藏按钮会跳转到登录页面；若已登录，则通过切换背景图片来实现商品的收藏与取消收藏。文章详细展示了实现这一功能所需的路由配置、CSS样式定义、HTML结构及JavaScript逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现目标：

1.点击收藏商品，先判断是否登录，没有登录跳转到登录页面

2.登录的话，把a跳转隐藏，切换背景图片实现收藏

路由：

.when("/my_center", { //我的个人中心
controller: personalCenterCtrl,
templateUrl: "views/center/personalcenter.html",
auth: true,
navUnderline: 10,
}).

启动：

.run(["$rootScope", "$location", "$anchorScroll", function($rootScope, $location, $anchorScroll) {
orderRegex($rootScope);
$rootScope.isLogin = Cookie.get("uid") != undefined; // 全局变量, 是否已登录
$rootScope.title = "";

$rootScope.$on("$routeChangeStart", function(event, next, current) { //监控路由, 路由更改前触发
$rootScope.isLogin = Cookie.get("uid") != undefined; // 全局变量, 是否已登录, 路由跳转前再次检测
if (next.auth == true && !$rootScope.isLogin) {
var nowPath = $location.path();
$rootScope.loginBackPath = nowPath; // 备份当前路径, 方便登录后跳回该地址
$location.path("/login");
} else if (next.navUnderline) {
$rootScope.navUnderline = next.navUnderline;
}
});
}]);

css

.pro-collect {
width: 30px;
height: 23px;
position: absolute;
top: 69px;
left: 1117px;
z-index: 12;
cursor: pointer;
cursor: -ms-pointer;
}
.pro-collect-true{
background: url("../../img/productdetail/ic_03.png") no-repeat;
background-size: 100% 100%;
}
.pro-collect-false{
background: url("../../img/productdetail/ic_033.png") no-repeat;
background-size: 100% 100%;
}

html

</div>

//2.收藏商品

if($rootScope.isLogin){
$scope.isShow = true;
$scope.noshow = {
"display":'none',
}
$scope.change_pic = function() {
$scope.isShow = !$scope.isShow;
}

}