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 相关文章推荐
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
老生常谈js中的MVC
Jul 25 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
react 生命周期实例分析
May 18 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
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
js表单验证实例讲解
2016/03/31 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
[00:35]可解锁地面特效
2018/12/20 DOTA
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
python多线程下信号处理程序示例
2019/05/31 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
面向对象概念面试题(.NET)
2016/11/04 面试题
项目经理任命书范本
2014/06/05 职场文书
成都人事代理协议书
2014/10/25 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
关于MySQL中的 like操作符详情
2021/11/17 MySQL