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 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 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
PHP include_path设置技巧分享
2011/07/03 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
PHP闭包函数详解
2016/02/13 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
JPype实现在python中调用JAVA的实例
2017/07/19 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
学习十八大精神心得体会
2013/12/31 职场文书
大学军训感言1000字
2014/02/25 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
2014年话务员工作总结
2014/11/19 职场文书
工作检讨书范文
2015/01/23 职场文书
百万英镑观后感
2015/06/09 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
给朋友的赠语
2015/06/23 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
解决mysql的int型主键自增问题
2021/07/15 MySQL
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang