将从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 || '默认名字乔丹'; ...
随机推荐
- 移动端 使用 vConsole调试
前言 用vue 写移动端代码,有个报名页面 就在iOS 9下出现问题,vue的循环渲染都正常,一开始的数据也能取到.证明不是vue的兼容性问题 但是在用户点击按钮发现不能点击进入跳转 工具 推荐使用 ...
- Django ckeditor增加编辑代码 功能
前言 使用ckeditor这个组件的时候 对于长写博客的同学当然希望能有 增加代码这个功能按钮 而这个按钮 需要自己配置 我们的编辑器自然需要添加代码块的功能. 需要用到插件codesnippet,c ...
- mysql<七>
-- ########## 01.集合逻辑 ########## -- MySQL中,只实现了一种集合逻辑:逻辑与,有两种用法:UNION 和 UNION ALL -- 临时表1 CREATE TAB ...
- UVALive 3523 : Knights of the Round Table (二分图+BCC)
题目链接 题意及题解参见lrj训练指南 #include<bits/stdc++.h> using namespace std; ; int n,m; int dfn[maxn],low[ ...
- 【leetcode】1218. Longest Arithmetic Subsequence of Given Difference
题目如下: Given an integer array arr and an integer difference, return the length of the longest subsequ ...
- 23.二叉搜索树的后序遍历(python)
题目描述 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 这道题特别傻的地方: 当输入sequence为空时 ...
- windows如何禁用惹人烦的开机启动广告
本地组策略编辑器 建立新的路径规则 重启电脑 本地组策略编辑器 你现在还在为那些烦人的互联网开机广告而发愁嘛,比如一下几种广告:这样的 还是这样的: 又或者是这样的: 修改了dns也并没有什么卵用,所 ...
- 实战build-react(二)-------引入Ant Design
安装 Ant Design npm install antd --save 或 yarn add antd 注释:https://www.jianshu.com/p/21caf40ee93e(cop ...
- Devexpress MVC Gridview
1. 根据选中的KeyValue 来获取其他field的value // Gridview settings settings.CustomJSProperties = (s, e) => { ...
- CF Round #569 Div2(contest1180)
比赛链接:http://codeforces.com/contest/1180 Problem A 题意:给出n,问方块数.看图理解... Solution: 找一找规律就可以了,发现方块数为2n*( ...