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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
vue.js todolist实现代码
Oct 29 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
深入浅析React中diff算法
May 19 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
解析MySql与Java的时间类型
2013/06/22 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
小程序实现搜索框
2020/06/19 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
缅怀革命先烈演讲稿
2014/05/14 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
滴水洞导游词
2015/02/10 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python