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 相关文章推荐
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
vue实现购物车的监听
Apr 20 Javascript
Vue详细的入门笔记
May 10 Vue.js
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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
3种php生成唯一id的方法
2015/11/23 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
js模拟hashtable的简单实例
2014/03/06 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
jquery图片切换插件
2015/03/16 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
python根据多个文件名批量查找文件
2019/08/13 Python
基于python实现把图片转换成素描
2019/11/13 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
运动会广播稿60字
2014/01/15 职场文书
面试后的感谢信范文
2014/02/01 职场文书
环保建议书200字
2014/05/14 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
Python实现视频中添加音频工具详解
2021/12/06 Python
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android