文章目录

  • 需求：
  • 一、给div赋值
  • 二、js代码接收值，并将值赋到其他html元素中去
  • 三、使用th:attr动态赋值


需求：

有时候我们有这么一个需求：写了一个div标签，然后想在这个div里面赋一些值，然后将这个div里的值传到下一个div（也可以是其他html元素）里去。

解决方案：使用HTML的【data-】字段，一段js代码

一、给div赋值

<div class="actions">
    <a data-commentid="1" data-commentnickname="大吉" onclick="reply(this)">回复</a>
</div>

简单解释一下：

HTML5自定义属性之 【data-】
HTML5 增加了一项新功能是 自定义数据属性 ，也就是 data-* 自定义属性。
在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，来进行一些数据的存放。

应用在这里，就是设置了两个属性，一个是commentid=“1” ; 另一个是commentnickname=“大吉”

这样我们就有了两个属性，commentid和commentnickname。然后根据后面的οnclick=“reply(this)” 将这两个属性给传到后面的js代码里去

至于为啥不用驼峰命名法，（据说）传大写字母会导致js接收不到

二、js代码接收值，并将值赋到其他html元素中去

/*
            点击回复按钮，会调用下面这个reply函数
            该js负责接收前面(this)传过来的 commentid, commentnickname两个属性
         */
        function reply(obj) {
            var commentId = $(obj).data('commentid');
            var commentNickname = $(obj).data('commentnickname');
            
            $("[name='parentComment.id']").val(commentId);  //将隐藏域的commentId赋值
            $("[name='content']").attr("placeholder", "@"+commentNickname).focus();     //给评论内容区域显示 @昵称（做到回复某人消息的 @昵称 功能）
        }

前面的html调用了该函数（onclick="reply(this)"）。点击按钮就会执行。

执行上面的js代码，会将之前赋的值传给另一个div中(代码如下):

<div id="comment-form" class="ui form">
    <input name="parentComment.id">
    <div class="field">
        <textarea name="content" placeholder="请输入评论信息..."></textarea>
    </div>
</div>

这样，这个div里面的input的value字段，就是前面传来的commentId，textarea里面的plaseholder字段，就是前面传来的 commentNickname。

三、使用th:attr动态赋值

至于想和后台交互，从后台拿值咋办？只需要使用thymeleaf的一个标签：th:attr

代码如下：

<div class="actions">
    <a data-commentid="1" data-commentnickname="大吉" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}" onclick="reply(this)">回复</a>
</div>

后面的th:attr就是配合前面的data- 来给属性动态赋值的 （完成动态赋值，连接后台Controller）

后面的js代码不用变。