V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Dive into HTML5
http://diveintohtml5.org/
Aeoluze
V2EX  ›  HTML

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

  •  
  •   Aeoluze · 2020-02-06 19:58:55 +08:00 · 2419 次点击
    这是一个创建于 1511 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    14 条回复    2020-09-26 18:40:04 +08:00
    optional
        1
    optional  
       2020-02-06 20:09:06 +08:00
    理论上 id 是唯一的。
    你这个把 id 改成 class,然后在父元素上委托一下就好,
    ysc3839
        2
    ysc3839  
       2020-02-06 20:13:37 +08:00 via Android
    id 应该是唯一的,你这种情况应该使用 class。
    imn1
        3
    imn1  
       2020-02-06 20:20:36 +08:00
    id 有相同的?
    rekulas
        4
    rekulas  
       2020-02-06 21:03:30 +08:00
    已经 0202 年了,querySelectorAll 了解下
    zhw2590582
        5
    zhw2590582  
       2020-02-06 21:03:35 +08:00
    id 相同其实没问题,浏览器照样解析,只是不合规范。
    beastk
        6
    beastk  
       2020-02-06 21:12:32 +08:00 via iPhone
    不改 class 的话,做个循环,功能绑定后改掉 id。
    beastk
        7
    beastk  
       2020-02-06 21:13:54 +08:00 via iPhone
    勘误,先绑定功能,浏览器会找到第一个 id,改掉,继续循环
    randyo
        8
    randyo  
       2020-02-06 21:18:12 +08:00 via Android
    id 重复不符合规范,你永远不知道哪个浏览器下就出 bug
    Aeoluze
        9
    Aeoluze  
    OP
       2020-02-06 21:31:22 +08:00
    @beastk
    @optional
    @ysc3839
    @rekulas
    按钮对应的 js 的功能是比较所属 div 的 content 元素高度与预设高度的大小,实现点击展开省略文本的功能,如果不用对应的 id 的话该如何修改指定的 content 元素属性呢?
    randyo
        10
    randyo  
       2020-02-06 21:35:07 +08:00 via Android
    看你代码,紧跟按钮的那个元素就是指定的 content
    beastk
        11
    beastk  
       2020-02-06 22:58:58 +08:00 via iPhone
    $(.classname)
    oatw
        12
    oatw  
       2020-02-06 23:20:44 +08:00 via iPhone
    好奇为啥没人提一下 event delegation
    ysc3839
        13
    ysc3839  
       2020-02-07 03:46:39 +08:00 via Android
    @Aeoluze this.nextElementSibling 就能获取到下一个同级的元素了。
    另外,“点击展开省略文本”可以用 css max-height 之类实现吧?也不需要比较高度呀。
    mostkia
        14
    mostkia  
       2020-09-26 18:40:04 +08:00
    按钮数量如果多的话,事件委托才是正道
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3246 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 11:43 · PVG 19:43 · LAX 04:43 · JFK 07:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.