按最靠近被单击按钮的 class 名称查找文档元素

Question

我有一个小 html 游戏使用 Backbone。

主页有多个 <div> 标签，class 名称为“monsterName”。

它附近有一个按钮，单击该按钮后，我想获取“monsterName”中的文本 <div>

我正在尝试使用 WebAPI 中的 closest() 方法来找到最接近 <div> 且 class 名称为“monsterName”的单击按钮。

这将帮助您查看我的 HTML 视图和模板生成的页面：

<div id="root">

<div id="title">Monster Hunting 101</div>

<div class="monsterArea">
    <div class="monsterName">Orc</div>
    <div class="controls">
        <button class="findMonster">Monster Hunting</button>
    </div>
</div>

<div class="monsterArea">
    <div class="monsterName">Dragon</div>
    <div class="controls">
        <button class="findMonster">Monster Hunting</button>
    </div>
</div>

<div class="monsterArea">
    <div class="monsterName">Giant</div>
    <div class="controls">
        <button class="findMonster">Monster Hunting</button>
    </div>
</div>

视图包含在单击“.findMonster”按钮时触发的代码：

events: {
    "click .findMonster": "startHunt"
},

单击该按钮时，它会触发此功能：

startHunt: function (e) {
    const $closestMonster = e.closest('.monsterName');
    console.log($closestMonster.innerHTML);
    ...do some stuff with the text in the monsterName...
}

所以视图和按钮都起作用了，它触发了 startHunt 事件。

但它总是给我这个错误：未捕获的类型错误：e.closest 不是函数

Answer 1

closest() 和 find() 的组合解决了这个问题：

const $closestMonster = e.closest('.monsterArea').find('.monsterName');

按最靠近被单击按钮的 class 名称查找文档元素

Find document element by class name closest to the button that is being clicked

javascript

backbone.js