如何在JavaScript中获取Odoo QWeb循环的公告索引值

循环渲染公告时，点击不同公告始终输出同一个索引值17，如何在JavaScript中分别捕获每个公告的ID（如17、18、19...）？

原代码 #

QWeb代码 #

<t t-foreach="widget.announcements" t-as="announcement">
    <div class="col-sm-12 col-lg-12 hr_announcement" style="padding:0;">
        <div class="text-color">
            <div class="">
                <div class="media">
                    <div class="media-body">
                        <h2 id="announcementID" class="text-color display-6" style="font-size: 11px; visibility: hidden;"><t t-esc="announcement[0]"/> </h2>
                        <h2 class="text-color display-6" style="font-size: 11px;"><t t-esc="announcement[1]"/> </h2>
                        <p><a href="#" style="font-size: 15px; color: #5ebade;"><b><t t-esc="announcement[2]"/></b></a></p>
                        <h2 class="text-color display-6" style="font-size: 11px;"><b>Start Date:</b> <t t-esc="announcement[3]"/> - <b>End Date:</b> <t t-esc="announcement[4]"/></h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</t>

JavaScript代码 #

hr_announcement: function(e) {
    let announcementID = document.getElementById('announcementID').innerHTML;
    console.log(announcementID)
    e.preventDefault();
},

解决方案 #

问题核心是循环中重复使用了id="announcementID"，而getElementById只会返回页面中第一个匹配的元素，导致每次点击都拿到同一个ID。以下是三种可行的解决方法：

方法1：用自定义属性存储ID（推荐） #

给每个公告容器添加data-id属性直接存储ID，点击时通过事件目标获取：

修改QWeb代码：

<t t-foreach="widget.announcements" t-as="announcement">
    <div class="col-sm-12 col-lg-12 hr_announcement" style="padding:0;" data-id="<t t-esc='announcement[0]'/>">
        <!-- 其余内容保持不变 -->
    </div>
</t>

修改JavaScript代码：

hr_announcement: function(e) {
    // 找到当前点击的公告容器
    let announcementContainer = e.target.closest('.hr_announcement');
    let announcementID = announcementContainer.dataset.id;
    console.log(announcementID);
    e.preventDefault();
},

方法2：绑定事件时直接传递ID（适配Odoo Widget场景） #

在QWeb中通过t-on-click指令绑定事件时，直接传入当前公告的ID：

修改QWeb代码（以点击标题为例）：

<t t-foreach="widget.announcements" t-as="announcement">
    <div class="col-sm-12 col-lg-12 hr_announcement" style="padding:0;">
        <div class="text-color">
            <div class="">
                <div class="media">
                    <div class="media-body">
                        <h2 class="text-color display-6" style="font-size: 11px;"><t t-esc="announcement[1]"/> </h2>
                        <p><a href="#" style="font-size: 15px; color: #5ebade;" t-on-click="hr_announcement(announcement[0], $event)"><b><t t-esc="announcement[2]"/></b></a></p>
                        <!-- 其余内容保持不变 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</t>

修改JavaScript代码：

hr_announcement: function(announcementID, e) {
    console.log(announcementID);
    e.preventDefault();
},

方法3：通过DOM结构查找唯一元素 #

移除重复ID，改用类名标记元素，点击时通过父级容器定位对应ID元素：

修改QWeb代码：

<t t-foreach="widget.announcements" t-as="announcement">
    <div class="col-sm-12 col-lg-12 hr_announcement" style="padding:0;">
        <div class="text-color">
            <div class="">
                <div class="media">
                    <div class="media-body">
                        <h2 class="announcementID text-color display-6" style="font-size: 11px; visibility: hidden;"><t t-esc="announcement[0]"/> </h2>
                        <!-- 其余内容保持不变 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</t>

修改JavaScript代码：

hr_announcement: function(e) {
    let announcementContainer = e.target.closest('.hr_announcement');
    let announcementID = announcementContainer.querySelector('.announcementID').innerHTML.trim();
    console.log(announcementID);
    e.preventDefault();
},

内容的提问来源于stack exchange，提问作者CoderS