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 相关文章推荐
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 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
图书管理程序(一)
2006/10/09 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
Python搭建FTP服务器的方法示例
2018/01/19 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
selenium+python环境配置教程详解
2019/05/28 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
如何获得EntityManager
2014/02/09 面试题
线程同步的方法
2016/11/23 面试题
高校十八大报告感想
2014/01/27 职场文书
租房协议书范文
2014/08/20 职场文书
碧霞祠导游词
2015/02/09 职场文书
车队安全员岗位职责
2015/02/15 职场文书
资料员岗位职责范本
2015/04/13 职场文书
2015年质检工作总结
2015/05/04 职场文书
Redis如何一键部署脚本
2021/04/12 Redis