将从model中获得的数据传到js函数中

最新推荐文章于 2023-03-20 14:34:24 发布

转载最新推荐文章于 2023-03-20 14:34:24 发布 · 587 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Zhanghaonihao/p/10860549.html

本文介绍了一种在前端循环渲染元素时遇到的重复ID问题及解决方案。通过动态添加ID并在JavaScript中处理点击事件，成功实现了对不同元素的独立操作。

刚遇到了一种情况，从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方法中进行调用
              })
        }  
}

转载于:https://www.cnblogs.com/Zhanghaonihao/p/10860549.html