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

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

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

jq动态修改css样式表,jquery 动态改变css样式
jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的.作为一个后端开发人员,要做一些前端页面时,CSS 样式的控制是少不了需要掌握的.如果是静态的CSS,当然是可以直接 ...
如何通过js改变css样式,如何通过JS 动态改变CSS样式
如何通过JS 动态改变CSS样式0 豆豆dou...2013.09.15浏览640次分享举报 .TLIWREGION3CSS { position:absolute; left:32px; top:4 ...
javascript、jquery 动态修改css样式方法
javascript.jquery 动态修改css样式方法 javascript 修改样式的方法第一种.使用obj.className来修改样式表的类名 var obj = document.get ...
js动态改变css样式
动态改变页面元素样式: 使用getElement系列方法访问元素. 改变样式属性:style属性:className属性. <!DOCTYPE html> <html>< ...
jQuery基础 - 改变CSS样式
本文转自:http://www.cnblogs.com/Capricornus/archive/2010/02/10/1667095.html,所有权利归原作者所有. jQuery提供css()的方法 ...
ajax导致jQuery动态改变CSS等属性延迟的解决方法
本来想使用ladda for bootstrap在点击按钮后立即改变按钮样式为加载状态,loading.ladda('start')明明写在ajax请求之前,但每次都是在 ajax 请求完成后才改变样 ...
用js动态改变css样式表（亲测可以）
一.对于响应式布局可以使用@media与@media screen(媒体查询)进行响应式布局. 二.对于非响应式页面可以采用以下方法: 用setAttribute方法实现一个页面两份样式表 ...
jquery怎么动态修改css样式
jquery动态修改css样式的方法:1.通过css方法动态修改css样式:2.给指定的html元素定一个CSS样式:3.查看元素的css样式:4.隐藏与显示p或指定的其他html元素. jquery ...
jquery html()样式悠效,jquery怎么用attr()方法判断改变css样式？
jquery怎么用attr()方法判断改变css样式?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. jquery中用attr()方法用于设置或返回被选元 ...

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

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

最新文章

热门文章