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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
asp 的 分词实现代码
May 24 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 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
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
用jquery来定位
2007/02/20 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
js+html制作简单验证码
2017/02/16 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
python登陆asp网站页面的实现代码
2015/01/14 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
Shell编程面试题
2012/05/30 面试题
生物化学研究助理员求职信
2013/10/09 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
上甘岭观后感
2015/06/10 职场文书
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js