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传数据的时候,

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

本人有自己的网站搞机族,欢迎大家访问!

相关文章
|
JavaScript
jQuery 展开列表
jQuery 展开列表
48 0
|
JavaScript
jQuery 插件自用列表
jQuery 插件自用列表
54 0
|
JavaScript 前端开发
前端基础 -JQuery之val,text,html
前端基础 -JQuery之val,text,html
79 1
|
12月前
|
JavaScript
jQuery数据结构渲染(4):复选框checkbox赋值
jQuery数据结构渲染(4):复选框checkbox赋值
65 1
|
12月前
|
JSON JavaScript 数据格式
jQuery数据结构渲染(3):文本和input/textarea框赋值
jQuery数据结构渲染(3):文本和input/textarea框赋值
54 1
|
JavaScript
jQuery 复选框 checkbox 取值和赋值
jQuery 复选框 checkbox 取值和赋值
135 0
|
JSON 前端开发 JavaScript
ajax请求接口,jquery拼接数据循环
ajax请求接口,jquery拼接数据循环
65 0
|
JSON JavaScript 数据格式
jquery拼接数据循环一个数据列表
jquery拼接数据循环一个数据列表
57 0
|
JavaScript 定位技术
jQuery实现点击图标div循环放大缩小功能
jQuery实现点击图标div循环放大缩小功能
59 0
|
前端开发 JavaScript
【jquery Ajax 】art-template模板引擎案例——新闻列表
【jquery Ajax 】art-template模板引擎案例——新闻列表
132 1
【jquery Ajax 】art-template模板引擎案例——新闻列表