html 里如何给循环添加的同 id 元素绑定同样的 js 脚本？

[Aeoluze]

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 脚本应用到循环添加的每个部件上

[optional]

理论上 id 是唯一的。
你这个把 id 改成 class，然后在父元素上委托一下就好，

[ysc3839]

id 应该是唯一的，你这种情况应该使用 class。

[imn1]

id 有相同的？

[rekulas]

已经 0202 年了，querySelectorAll 了解下

[zhw2590582]

id 相同其实没问题，浏览器照样解析，只是不合规范。

[beastk]

不改 class 的话，做个循环，功能绑定后改掉 id。

[beastk]

勘误，先绑定功能，浏览器会找到第一个 id，改掉，继续循环

[randyo]

id 重复不符合规范，你永远不知道哪个浏览器下就出 bug

[Aeoluze]

@beastk
@optional
@ysc3839
@rekulas
按钮对应的 js 的功能是比较所属 div 的 content 元素高度与预设高度的大小，实现点击展开省略文本的功能，如果不用对应的 id 的话该如何修改指定的 content 元素属性呢？

[randyo]

看你代码，紧跟按钮的那个元素就是指定的 content

[beastk]

$(.classname)

[oatw]

好奇为啥没人提一下 event delegation

[ysc3839]

@Aeoluze this.nextElementSibling 就能获取到下一个同级的元素了。
另外，“点击展开省略文本”可以用 css max-height 之类实现吧？也不需要比较高度呀。

[mostkia]

按钮数量如果多的话，事件委托才是正道