关于jquery动态改变css样式后，对象获取不到的解决办法

最新推荐文章于 2023-01-08 18:23:29 发布

weixin_34357436

最新推荐文章于 2023-01-08 18:23:29 发布

阅读量546

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/583531/blog/838275

版权

2019独角兽企业重金招聘Python工程师标准>>>

情况如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<style>
			.btn,.btn_selected{ margin:30px; padding: 5px 10px; width: 200px; line-height: 24px; }
			.btn{ background: #fff; border: 1px solid darkred;}
			.btn_selected{ background: darkred; color: #fff;}
		</style>
		<script type="text/javascript">
			$(function(){
				$(".btn").click(function(){
					$(this).removeClass("btn").addClass("btn_selected")
				})
				
				$(".btn_selected").click(function(){
					$(this).removeClass("btn_selected").addClass("btn")
				})
			})
		</script>
		
	</head>
	<body>
		<div class="btn">11</div>
		<div class="btn">22</div>
		<div class="btn">33</div>
		<div class="btn">44</div>
	</body>
</html>

页面在初始化时，点击div.btn是可以改变自己的样式，结果F12调试查看，的确点击过后，该div的css名称已经切换成btn_selected的。

但是，此时，问题是：jquery，$(".btn_selected")这个对象却是获取不到了？？这样就没办法，再次点击后去掉已选择状态的css样式。

解决办法如下, 其他基本不变，主要改动在js部分。主要是在每次按钮单击后，做一个判断，再次检测。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<style>
			.btn,.btn_selected{ margin:30px; padding: 5px 10px; width: 200px; line-height: 24px; }
			.btn{ background: #fff; border: 1px solid darkred;}
			.btn_selected{ background: darkred; color: #fff;}
		</style>
		<script type="text/javascript">

            $(function(){
            	
            	var obj = $("div[tit='btn']")
//          	var objNum = obj.length;
//          	alert(objNum)
            	obj.click(function(){
            		//在每次单击前,做一个判断.是否含有匹配的css名称,
            		if ($(this).hasClass("btn"))
            			{
            				$(this).removeClass("btn").addClass("btn_selected")
            			}
            		else
            			{
            				$(this).removeClass("btn_selected").addClass("btn")
            			}
            		
            	})
            })
		</script>
		
	</head>
	<body>
		<div class="btn" tit="btn">11</div>
		<div class="btn" tit="btn">22</div>
		<div class="btn" tit="btn">33</div>
		<div class="btn" tit="btn">44</div>
	</body>
</html>

转载于:https://my.oschina.net/u/583531/blog/838275