实现按钮点击调用方法传参数的方式传值给模态框


实现的效果：可能描述的话，不一定能描述的清楚，就直接上图，根据图片来描述
在这里插入图片描述
上面是总页面图，下面全是点击不同的编辑按钮的模态框
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
就如上几张图的效果这样的页面，点击编辑按钮弹出模态框显示相应的数据（当然模态框的html代码只有一个，按钮也只通过相同的class来实现这一效果），那么怎么实现这一效果呢，接下来就来讲讲

准备（首先说说这里主要需要用到的技术）：
前端：jquery
后端：基本所有的语句都能打印获取数据，主要讲js的部分，这里我使用的是php

正文部分：
首先在数据库中查询数据并在页面打印数据这里我就不做详细讲解，直接从循环输出按钮的主要部分开始：

当然这其中也出现了三种情况：

情况一： 循环打印下面的按钮（其中的editFile()中的参数都是数据库查询出来的通过该方法传值）

1
   <button class="btn btn-primary btn-xs  edit_btn"  data-toggle="modal" data-target="#my_submit_Modal"  onclick="editFile('.$task_id.','.$initiator.','.$problem_type.','.$charge_uuid.','.$content.','.$remarks.')">编辑</button>

前端显示的代码：

1
2
3
4
5
6
7
8
  editFile =  function(task_id,initiator,problem_type,charge_uuid,content,remarks){
        $("#task_id").val(task_id);
        $("#edit_initiator").val(initiator);
        $("#edit_problem_type").val(problem_type);
        $("#edit_charge_uuid").val(charge_uuid);
        $("#edit_content").html(content);
        $("#edit_remarks").html(remarks);
    }

然后就会发现有些成功打印了有些失败了，这是为什么呢？？？？

然后我通过页面按F12查看发现了问题：
在这里插入图片描述
只能显示数字的，字符串的没有括起来

情况二：于是我在传值的时候加上了单引号

1
 <button class="btn btn-primary btn-xs  edit_btn"  data-toggle="modal" data-target="#my_submit_Modal"  onclick="editFile('.$task_id.','.$initiator.','.$problem_type.','.$charge_uuid.',\'.$content.'\',\''.$remarks.'\')">编辑</button>

于是字符串终于能打印了，你以为这样就结束了？不，又遇到了新的问题。。。。。

下面这种换行的不能打印
在这里插入图片描述
会出现这样的问题：
在这里插入图片描述
很明显因为换行影响了它的单引号括起来的问题

然后怎么办呢？我苦思冥想，查了资料，最后想到了解决方法

情况三：使用自定义属性，然后用jquery中的attr()方法（获取属性的属性值），于是我先更改了按钮和js的代码：

1
 <button class="btn btn-primary btn-xs  edit_btn"  data-toggle="modal" data-target="#my_submit_Modal" data-content = "'.$content.'" data-remarks = "'.$remarks.'"   onclick="editFile('.$task_id.','.$initiator.','.$problem_type.','.$charge_uuid.','.$i.')">编辑</button>
1
2
3
4
5
6
7
8
  editFile =  function(task_id,initiator,problem_type,charge_uuid,i){
        $("#task_id").val(task_id);
        $("#edit_initiator").val(initiator);
        $("#edit_problem_type").val(problem_type);
        $("#edit_charge_uuid").val(charge_uuid);
        $("#edit_content").html($('.edit_btn').eq(i-1).attr("data-content"));
        $("#edit_remarks").html($('.edit_btn').eq(i-1).attr("data-remarks"));
    }

成功实现想要的效果

写的不好有些乱，请见谅，记录一下问题和解决