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 相关文章推荐
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 Javascript
JavaScript实例 ODO List分析
Jan 22 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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
PHP的开发框架的现状和展望
2007/03/16 PHP
php 日期时间处理函数小结
2009/12/18 PHP
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
PHP数据类型的总结分析
2013/06/13 PHP
php实现加减法验证码代码
2014/02/14 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
pandas实现导出数据的四种方式
2020/12/13 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
普通PHP程序员笔试题
2016/01/01 面试题
网站设计师的岗位职责
2013/11/21 职场文书
英文导游欢迎词
2014/01/11 职场文书
仓库管理制度
2014/01/21 职场文书
驾驶员岗位职责
2014/01/29 职场文书
论文指导教师评语
2014/04/28 职场文书
消防安全宣传标语
2014/06/07 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers