按类名查找与所单击按钮最接近的文档元素

问题描述

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

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

旁边有一个按钮，单击该按钮后，我要获取“ monsterName” <div>

中的文本

我正在尝试使用WebAPI中的closest()方法来查找最接近的<div>类名称为“ 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 事件。

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

解决方法

结合使用Welcome,Abdul Kalam! 和closest()可以解决此问题：

find()