专栏首页用户7363577的专栏jquery怎么给循环出来的列表(类似于text框)取值和赋值

jquery怎么给循环出来的列表(类似于text框)取值和赋值

场景描述:这样的我在项目的时候遇到了一个很常见的问题,但是一直没有解决,最后在朋友的帮助下解决了,所以简单的将这个代码和解决的过程描述一下,给以后你们遇到类似问题的时候一个参考。

问题描述:我需要做一个生成验证码,然后将生成的验证码放到对应的框里面的功能。但是因为这些数据是遍历出来的,

所以就出现了,text的id不好设置为变量的一个问题。页面是这样的:

页面代码是这样的

 <input type="text" readonly="true" style="width: 4rem;" value="" id="pantinecode"/>
  <button class="layui-btn layui-btn-mini links_edit" href="javascript:void(0);" οnclick="generatecode(${patient.id});" id="btn"><i class="layui-icon"></i>生成验证码</button>

js代码是这样的

function generatecode(id){
		$.ajax({
	  		 type : "post",
	  		 url : "/sys/patientcode.htm"?patientId="+ id +",//这个是我的接口
	  		 data : {},
	  		 dataType : "json",
	  		 async : false,
	  		 success : function(data) {
	  		 if(data.code != '0') {
	  		 $("#pantientcode").val(data.message);
	  		  else {
	  		  layer.alert("生成失败!");
	  		    }
	  		 }
	  		    	 });
	  		}

ok,这是我们大家都会的一种常规写法,但是这样的结果就是:

是的,我点击第二个按钮,生成的验证码是在第一个上面显示的,很头疼,所以就问了我朋友这块怎么处理比较合适,

直接上代码

<input type="text" readonly="true" style="width: 4rem;" value="" id=${patient.id}/><!--这里是变量,也就是我通过jquery取出来的-->
    <button class="layui-btn layui-btn-mini links_edit" href="javascript:void(0);" οnclick="generatecode(${patient.id});" id="btn"><i class="layui-icon"></i>生成验证码</button>

js是这样的

function generatecode(id){
 $.ajax({
	  type : "post",
	  url : "/sys/patientcode.htm"?patientId="+ id +",//这个是我的接口
	  data : {},
	  dataType : "json",
	  async : false,
	  success : function(data) {
	  if(data.code != '0') {
	  $("#"+id).val(data.message);
	  else {
	  	layer.alert("生成失败!");
	  	}
	  }
	  	});
	  }

然后的结果就是这样的:

完美的适应到。

ok简单的总结一下,这次出现这样的问题,原因很简单,是因为自己对jquery的操作还不是很明白,其实给一个元素

加一个id的时候,只要是将id设置为双引号引起来的,那么jquery就会认为你的是定值,只有将变量给id才是可以给不

同的元素赋值的,id后面的是根据需要来判断是不是需要加引号的。这个是需要记住的,然后就是ajax传数据的时候,

拼接字符串的时候一定要注意,不要写错了,一旦写错了,后果就是取值赋值失败!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript实现在线生成二维码

    二维条码是指在一维条码的基础上扩展出另一维具有可读性的条码,使用黑白矩形图案表示二进制数据,被设备扫描后可获取其中所包含的信息。

    何处锦绣不灰堆
  • 微信公众号开发之微信支付代码记录

    这个需求说明是完全没有必要的,但是还是写一下吧,但凡是做公众号的,一般都是需要了解这个微信支付的,不然基本的业务都没办法走,所以今天简单的记录一下微信支付的一些...

    何处锦绣不灰堆
  • 教你怎么用ajax传数组(也可以是转为json)

    我之前写过一个关于ajax的详解,那个是标准的ajax,今天介绍的是怎么用ajax传递数组这样的数据类型呢?很多的时候我们需要给后端的数据不是几个单独的数据,一...

    何处锦绣不灰堆
  • sql语句

    参考以下 SQL> select * from test; ID MC ---------- ------------- 1 11111 1 22...

    阿新
  • 面试题|无索引如何删除亿级数据?

    存在索引的情况下就比较简单,直接利用索引进行删除,写一个for 循环语句 每次删除500行,每次判断delete 影响的行数可以累加计算删除了多少行,直到删除结...

    [3306 Pai ] 社区
  • 约束

    一 介绍 约束条件与数据类型的宽度一样,都是可选参数 作用:用于保证数据的完整性和一致性 主要分为: PRIMARY KEY (PK) 标识该字段为该表的...

    用户1214487
  • 评论功能的简单实现

    网上看到有三种类型的评论,按照笔者的理解记下了过程(可能理解错了,望大神指出),所以列出的是笔者的理解,下面以模拟博客评论的场景来说明,(这些类型是笔者形容的,...

    晚上没宵夜
  • 【leetcode两题选手】MySQL类题目(八)

    某城市开了一家新的电影院,吸引了很多人过来看电影。该电影院特别注意用户体验,专门有个 LED显示板做电影推荐,上面公布着影评和相关电影描述。

    看、未来
  • Bypass 360主机卫士SQL注入防御(多姿势)

    在服务器客户端领域,曾经出现过一款 360 主机卫士,目前已停止更新和维护,官网都打不开了,但服务器中依然经常可以看到它的身影。

    信安之路
  • springmvc实例之修改雇员相关信息(四)

    首先是在EmployeeHandler.java中编写toEditEmployeePage方法:

    绝命生

扫码关注云+社区

领取腾讯云代金券