将从model中获得的数据传到js函数中
刚遇到了一种情况,从controller中获得的model是一个集合,需要将这个集合循环放到标签中,并且需要为这些标签添加点击事件,每个值传入对应的点击事件函数中,由于model中的值是通过${item.user_id} 获取的,通过循环得到的标签的id都是相同的,不能直接通过id获得数据。以下是我想到的方法,不知道还有没有更简单的方法,欢迎回复。
1、由于循环得到的id都是相同的,所以在循环标签中不添加id,在js中动态添加js.
<th:block th:each="item,itemStat : ${wantadopter}" th:if="${itemStat.count}<=5">
<li>
<!-- 帖子操作 post_operation-->
<div class="post_operation">
<div class="operation_button"></div>
<div class="operation_opt">
<div th:switch="${item.adobtStatus}">
<div th:case="0">
<div class="jjly">
<span class="jujue_box" th:value="${item.user_id}" title="发送消息"></span>
</div>
</div>
</div>
</div>
</div>
</li>
</th:block>
2、通过JS获得model的值
$(function () {
const list = [[${wantadopter}]];
var i222 = 0;
$(".jujue_box").each(function () {
var in11 = i222;
$(this).attr('id', "user_" + i222);
i222 += 1;
})
for(var i=0;i<list.length;i++){
$("#user_"+i).click(function (){
//这样就获得了model中的值list[$(this).index()].user_id
console.log(list[$(this).index()].user_id);
//可以直接传到JS方法中进行调用
})
}
}
将从model中获得的数据传到js函数中的更多相关文章
- 【pytest官方文档】解读- 如何自定义mark标记,并将测试用例的数据传递给fixture函数
在之前的分享中,我们知道可以使用yield或者return关键字把fixture函数里的值传递给test函数. 这种方法很实用,比如我在fixture函数里向数据库里插入必要的测试数据,那我就可以把相 ...
- 在JS函数中执行C#中的函数、字段
1.调用字段 cs文件的代码: ; protected void Page_Load(object sender, EventArgs e) { id = ; } js页面的代码: function ...
- 深入理解JS函数中this指针的指向
函数在执行时,会在函数体内部自动生成一个this指针.谁直接调用产生这个this指针的函数,this就指向谁. 怎么理解指向呢,我认为指向就是等于.例如直接在js中输入下面的等式: console.l ...
- js函数中获得当前被点击元素
问题描述:在html页面中点击<a>或者’按钮‘,进入js中的函数,在js函数中获得被点击那个<a>或‘按钮’元素 解决方法:方法一: html中: <a>标签:& ...
- js函数中参数的传递
数据类型 在 javascript 中数据类型可以分为两类: 基本类型值 primitive type,比如Undefined,Null,Boolean,Number,String. 引用类型值,也就 ...
- js函数中的BOM和DOM
BOM 浏览器对象模型 screen对象 console.log(screen.width);// 屏幕宽度 console.log(screen.height);// 屏幕高度 console.l ...
- js函数中this的不同含义
1.js函数调用过程中,js线程会进入新的执行环境并创建该环境的变量对象,并添加两个变量:this和arguments,因此可以在函数中使用这两个变量.需要注意的是,this变量不能重新赋值,而arg ...
- js 函数中的this
资料 function 函数 没有"this"的持久概念, 调用函数时,创建this function hello(thing) { console.log(this + &quo ...
- js函数中写默认值的几种方式(常见的)
<script> <!--第一种写法,我更喜欢第一种写法直观一些--> function Person(name){ this.name = name || '默认名字乔丹'; ...
随机推荐
- Mapnik连接文件数据、数据库中的vertor数据和raster数据
Mapnik的XML文件,选择其中一个Datasource. <?xml version="1.0" encoding="utf-8"?> < ...
- 上采样 及 Sub-pixel Convolution (子像素卷积)
参考:https://blog.csdn.net/leviopku/article/details/84975282 参考:https://blog.csdn.net/g11d111/article/ ...
- python导入包失败ModuleNotFoundError: No module named 'matplotlib.pyplot'; 'matplotlib' is not a package
最近在看 python,在使用matplotlib进行绘图时,提示:ModuleNotFoundError: No module named 'matplotlib.pyplot'; 'matplot ...
- gdal test
https://blog.csdn.net/hb_programmer/article/details/81807699 gdal/ogr是一个光栅和矢量地理空间数据格式的翻译库,由开源地理空间基金会 ...
- selenium+常见操作
1.多窗口操作 有些页面的链接打开后,会重新打开一个窗口,对于这种情况,想在新页面上操作,就得先切换窗口了.获取窗口的唯一标识用句柄表示,所以只需要切换句柄,我们就能在多个页面上灵活自如的操作了. 句 ...
- [BZOJ1718]:[Usaco2006 Jan] Redundant Paths 分离的路径(塔尖)
题目传送门 题目描述 为了从F个草场中的一个走到另一个,贝茜和她的同伴们有时不得不路过一些她们讨厌的可怕的树.奶牛们已经厌倦了被迫走某一条路,所以她们想建一些新路,使每一对草场之间都会至少有两条相互分 ...
- mysql update语句与limit的结合使用
有时候有需要批量更新数据表中从多少行到多少行的某个字段的值 mysql的update语句只支持更新前多少行,不支持从某行到另一行,比如 UPDATE tb_name SET column_name=' ...
- curl下载文件时自动创建目录
有时候需要自动创建多级目录 按照如下格式即可 curl -o d:/lei/demo/test.jpg --create-dirs http://img.7160.com/uploads/allimg ...
- leetcode-mid-sorting and searching - 33. Search in Rotated Sorted Array
mycode class Solution(object): def search(self, nums, target): """ :type nums: List[i ...
- 十、Springboot之thymeleaf与jsp共存
: pom.xml添加依赖 <!--thymeleaf整合JSP需要用到下面的依赖--> <dependency> <groupId>org.thymeleaf&l ...