代码之家 › 专栏 › 技术社区 › Loki

传单弹出项目列表和添加点击事件

leaflet vue.js

0

Loki · 技术社区 · 4 年前

大家好,我正在使用Leaflet,我在显示项目列表时遇到了一个问题,我想添加点击事件监听器,这样我就可以在点击时获得列表项目的id和名称:)

以下是我迄今为止的代码:

const list = [{ id: 2, name: 'John'}, { id: 2, name: 'Bill'}, { id: 2, name: 'Ted'}];

const itemList = list.map((item) =>
                    `<tr class="is-clickable">
                                <td>${item.id}</td>
                                <td>${item.name}</td>
                            </tr>`).join('');

const popupTable = `<table class="table is-striped is-fullwidth">
                              <thead>
                                <tr>
                                  <th>Id</th>
                                  <th>User Name </th>
                                </tr>
                               </thead>
                               <tbody>
                                       ${itemList}
                                </tbody>
                            </table>`;

var popup = L.popup()
             .setLatLng(e.layer.getLatLng())
             .setContent(popupTable)
             .openOn(this.map.instance)

有人知道我该如何为每个添加点击处理程序吗 tr 列表中的标签?

0 回复 | 直到 4 年前

1

Falke Design 4 年前

获取全部 tr 使用querySelector添加元素,然后添加侦听器

var trs = document.querySelectorAll('.leaflet-buttons-control-button')
trs.forEach((tr)=>{
    L.DomEvent.on(tr,'click',(e)=>console.log('click'))
});