Flask 项目，在前端页面通过 Jinja2 模板的循环语句从列表中获取 object，并根据 object 的信息添加 div {% for item in posts %} <button type="button" class="btn btn-default" id="more_bt"> </button> <div id="content" class="content"> {{item.content|safe}} </div> {% endfor %}
现在的问题是希望在 div 中的 <button> 中绑定以下的 js 脚本，但是由于使用 getElementById 所以 js 只能获取第一个 id="more_bt"的 <button> 元素 <script> var btn = document.getElementById('more_bt'); var btn_less = document.getElementById('less_bt'); var obj = document.getElementById('content'); var total_height = obj.scrollHeight;//文章总高度 var show_height = 20;//定义原始显示高度 if(total_height>show_height){ btn.style.display = 'block'; btn.onclick = function(){ obj.style.height = total_height + 'px'; btn.style.display = 'none'; btn_less.style.display = 'inline'; } btn_less.onclick = function(){ obj.style.height = show_height + 'px'; btn_less.style.display = 'none'; btn.style.display = 'inline'; } } </script>
求解该如何将 js 脚本应用到循环添加的每个部件上