thymeleaf页面中使用data-*自定义属性

转载麦洛:thymeleaf页面中使用data-*自定义属性

一.前言

在我们平时使用thymeleaf时,经常会用到th:each标签来循环遍历数据,以便将数据展示到页面中。尤其在后台管理软件比较常见。试想我们要给循环遍历出的每个元素都绑定点击事件，那我我们点击某一个按钮时，如何将这个按钮从所有按钮区分出来？这里我们就要用到自定义属性。
首先我们来看一个应用场景：

图片来源网络

微信投票需求中,我们在页面中就可以th:each标签来将所有用户的投票信息遍历展示出来,点击某个用户头像,需要跳转到个人报名信息页面.那么我们怎么区分点击的是哪个用户,这里我们就需要用到自定义属性.

二.data-*自定义属性语法

格式：data-*

1.自定义单个属性

<div th:attr="data-id=${element.getId()}" >

2.自定义多个属性

<div th:attr="data-id=${element.getId()},data-name=${element.getN‌​ame()}">

 
 

 
 

我们来解释下上面的代码,其中data-id/data-name就是自定义的属性,在自定义属性中，我们可以传递需要的参数。

三.获取自定义属性值

下面我们演示如何使用Jquery在js文件中获取我们的自定义属性值.

首先我们需要将刚才的代码修改一下,将当前点击的按钮的this传递过去

<div th:attr="data-id=${element.getId()}"  th:οnclick="doVote(this)">

 
 

 
 

接下来我们需要在页面的js中写一个对应的方法doVote(),用that来接受我们传递的this;

function doVote(that) {
    }

 
 

 
 

最后我们可以用Jquery语法来获取我们自定义属性

unction doVote(that) {
    var userId = $(that).attr('data-id');
    }

 
 

 
 

说明:网上也有不传递this的写法,但是我没有测试成功,以上方法经测试一切正常;

四.结果

运行代码,我们发现成功获取到当前点击用户的id,接下来我们可以根据此id来操作后续流程;