Jquery选择器中使用变量实现动态选择例子


Posted in Javascript onJuly 25, 2014

例子一:

<table>
  <tr>
    <th>用户名</th>
    <th>状态</th>
  <tr>
  <tr>
    <td>张三</td>
    <td data-uid="10000">正常</td>
  <tr>
  <tr>
    <td>李四</td>
    <td data-uid="10001">冻结</td>
  <tr>
  <tr>
    <td>王二麻子</td>
    <td data-uid=10002>冻结</td>
  <tr>
</table>

<script type="text/javascript">
$(document).ready(function(){
  var uid = 1001;
  $("td[data-uid = "+ uid +"]").html('正常');
}
</script>

例子二:

<script type="text/javascript">
 $(function(){
  alert(123);
  var v=4;
  var test=$("input[type='radio'][value='"+v+"']");//直接拼接字符串就可以了
  console.info(test);
  var testValue=test.attr({"checked":true});
  console.info(testValue);
 }); 
 </script>
 
 <body>
  This is my JSP page. <br>
  <table>
 <tr>
 <td>性别:</td>
 <td>
  <input name="sex" type="radio" value="0"/>男 0
  <input name="sex" type="radio" value="1"/>女 1
  <input name="sex" type="radio" value="2"/>女 2
  <input name="sex" type="radio" value="3"/>女 3
  <input name="sex" type="radio" value="4"/>女 4
 </td>
 </tr>
  </table>
 </body>

例子三、jQuery中选择器参数使用变量应该注意的问题

这是原来的代码

var li_index = $(this).index();

var $content_index = li_index + 2;

var $content_progress = $(“div.content:eq(” + $content_index + “)”);

var $newavalue = $(this).find(“a”).attr(“name”);

var $resource = $(this).find(“a”).html().replace(“首页”,$newavalue);

var $afterresource = $resource.replace($newavalue,””);

var $afterresource = $newavalue + $afterresource.replace(“首页”,$newavalue);

实现的是关键词替换,不过到第三行时候不执行了,调试啊,替换啊,都不行。 从早上到刚才一直在各种群里面发问,终于 …… 俺们大本营 的Lomu大神一阵见血:

你的写法不对

要连接符

$(“div.content:nth-child($content_index)”);

改为

$(“div.content:nth-child(” + $content_index + “)”);

关键是外面有引号

有引号被当字符串处理了

说真的现在感觉,有些基础的东西出错,光靠自己调试根本找不出问题所在。比如刚才那个 + 号,我看书就没见过。出现这种错误百度也不知道什么关键词。真不知道  选择器 里面用变量 还要用到+号,那个《锋利的jQuery 》也没有明确的说 选择器 里面用变量 还要用到+号,包括我们的w3cschool。

Javascript 相关文章推荐
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
jquery.validate使用攻略 第三部
Jul 01 Javascript
Js 时间间隔计算的函数(间隔天数)
Nov 15 Javascript
js确定对象类型方法
Mar 30 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 #Javascript
js星星评分效果
Jul 24 #Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 #Javascript
js创建对象的区别示例介绍
Jul 24 #Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 #Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 #Javascript
技术男用来对妹子表白的百度首页
Jul 23 #Javascript
You might like
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
php数组添加元素方法小结
2014/12/20 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
php session 写入数据库
2016/02/13 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
php之可变函数的实例详解
2017/09/13 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
js简单时间比较的方法
2016/08/02 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
浅析vue深复制
2018/01/29 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
Python 列表(List)操作方法详解
2014/03/11 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
参观邀请函范文
2015/02/02 职场文书
2015年营业员工作总结
2015/04/23 职场文书
身份证丢失证明
2015/06/19 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android