将从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 || '默认名字乔丹'; ...
随机推荐
- wepy框架换行
上图所圈的写法会造成如下图所示 在微信开发工具是没有问题的,在真机 运行下会出现空格问题. 解决如下:
- 【NOIP2016提高A组模拟8.15】Throw
题目 分析 首先对于一个状态(a,b,c),假定a<=b<=c: 现在考虑一下这个状态,的转移方案: \[1,中间向两边跳(a,b,c)-->(a*2-b,a,c).(a,b,c)- ...
- tf.stack( )和tf.unstack( )
相同点:他们都增加了矩阵的维度,而split()不改变维度! tf.stack()这是一个矩阵拼接的函数,tf.unstack()则是一个矩阵分解的函数 c是拼接,而d和e则是不同维度的分解
- css-select的三角在不同浏览器的样式是不一样的,所以我们这样解决???
select{ width:57px; height:23px; border:1px solid #e9e9e9; outline: none; appearance: none; -moz-app ...
- 5. ClustrixDB SQL语法
CustrixDB支持的DML语法 SELECT, DISTINCT, [LEFT | RIGHT | OUTER] JOIN, STRAIGHT_JOIN UNION, HAVING, GROUP ...
- linux安装配置Redis,Swoole扩展
我是使用的是lnmp环境(php5.6.3) 一.安装redis数据库(参考w3c手册) 下载地址:http://redis.io/download 本教程使用的最新文档版本为 2.8.17,下载并安 ...
- 为什么C++中只有指针和引用才能实现多态?
代码: class A { public: virtual void Debug(){} }; class B:public A { public: virtual void Debug(){} }; ...
- 数据:ContentProvider类
一个程序可以通过实现一个Content provider的抽象接口将自己的数据完全暴露出去,而且Content providers是以类似数据库中表的方式将数据暴露. Content provid ...
- 启用Executor初始化线程池
前言 上文我们介绍了JDK中的线程池框架Executor.我们知道,只要需要创建线程的情况下,即使是在单线程模式下,我们也要尽量使用Executor.即: ExecutorService fixedT ...
- ArrayList类源码浅析(二)
1.removeAll(Collection<?> c)和retainAll(Collection<?> c)方法 第一个是从list中删除指定的匹配的集合元素,第二个方法是用 ...