将从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 || '默认名字乔丹'; ...
随机推荐
- vue3作业
""" 1.按照上方 知识点总结 模块,总结今天所学知识点: 2.有以下广告数据(实际数据命名可以略做调整) ad_data = { tv: [ {img: 'img/t ...
- Nmap使用及常见的参数选项
概要 当Nmap不带选项运行时,该选项概要会被输出,最新的版本在这里http://www.insecure.org/nmap/data/nmap.usage.txt.它有助于人们记住最常用的选项,但不 ...
- Educational Codeforces round 78 A、B
链接:https://codeforces.com/contest/1278 A:Shuffle Hashing 题意:对于一个字符串p可以执行一个"hash"操作,首先将p内的元 ...
- EF大数据插入
_April给出代码: using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotati ...
- 一个超详细vue无限滚动vue-infinite-scroll插件的配置及使用详解
开发中总会遇到这种下拉加载的设计方案,Vue实现下拉加载最佳方案自然是使用vue-infinite-scroll来实现.接下来我们一起看下它的配置及使用方式. 首先我们先了解下他的配置参数: v-in ...
- django model序列化作用举例
一直对使用DRF的了解停留在一知半解的状态,今天在实际操作中,感受到了DRF带来的方便 Django工程,其中两个model定义如下: AutomationHeadRaw: class Automat ...
- [CF1101F]Trucks and Cities:分治优化决策单调性
分析 好像是有一个叫这个名字的算法,链接. 令\(f[i][j][k]\)表示一辆每公里耗油量为\(1\)的货车从\(i\)到\(j\)中途加\(k\)次油最小的油箱容量.枚举所有的起点和中途加油的次 ...
- NABCD分析——生活日历
N(Need)需求 本软件的主体为日历.如今人们的生活趋于现代化,大家主要通过手机来查看日期,但我们每一天都有想要做或未完成的事情,也存在对自己有特殊意义的日子.每天人们都会有或大或小的支出与收入,想 ...
- [design pattern](7) Singleton
前言 上面的章节中,我们介绍了工厂模式,它是创建型模式的一种.本章我们将会介绍 单例模式 ,它也是创建型模式的一种.单例模式是我们比较常用的一个设计模式,也是最简单的一种设计模式. 单例模式 介绍:确 ...
- java 用redisTemplate 的 Operations存取list集合
一 .存取为list类型 @RestController @RequestMapping("/test") @Slf4j public class TestController { ...