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 表单验证扩展(三)
Oct 20 Javascript
JQuery开发的数独游戏代码
Oct 29 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
vue router返回到指定的路由的场景分析
Nov 10 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
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
php验证码实现代码(3种)
2015/09/07 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
input 输入框内的输入事件详细分析
2010/03/17 Javascript
JavaScript 格式字符串的应用
2010/03/29 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
react-router实现按需加载
2017/05/09 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
深入理解Django中内置的用户认证
2017/10/06 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
详解python做UI界面的方法
2019/02/27 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
Python类的继承super相关原理解析
2020/10/22 Python
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
校长岗位职责
2013/11/26 职场文书
行政专员工作职责
2013/12/22 职场文书
法律六进活动方案
2014/03/13 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle