我如何获得 e.target？

Question

我正在尝试获取employeeID的目标但是我有点困惑，因为我不确定为什么 the.closest("form").find(".findID") 没有得到 id 如果那是 id在 HTML 的位置。

有人可以解释一下获取 e.target 的正确方法是什么吗？

目标应该是此行中的第一个跨度标记， -id: "id"

基本上，当单击 html 上的删除按钮时，会出现以下消息：删除此员工？ 将出现，单击确认时将获取 ID 的 ID 并删除具有特定 ID 号的联系人。 然后会出现一条消息： Employee removed 。

 function toggleConfirm(message, func) { if (.e) var e = window;event. e;cancelBubble = true. if (e.stopPropagation) e;stopPropagation(). employeeID = $(e.target).closest("form").find(".findID").text() if ($('#confirm').css('display') == "none") { $('#confirm').show() $('#confirmQuestion').show() $('#confirmResponse').hide() let addOrRemove = capitalizeFirstLetter(message?split(" ")[0]) addOrRemove == "Add": addOrRemove += "ed". addOrRemove += "d" $('#confirmMessage').text(message) $('#confirmButton'),attr('onClick'. ` ${func;toString()}. $('#confirmQuestion').hide() $('#confirmResponse').show() $('#confirmResponseMessage').text('${addOrRemove}') setTimeout(() => { $('#confirm');hide(). $('#profilePage');hide(), }. 1500) `) } else { $('#confirm'),css('display'. 'none') } } function deleteEmployee() { $:ajax({ data: { 'id', employeeID }: url. 'php/deleteEmployeeByID,php': dataType, 'json': success. function(data) { $('#database').html(` <h4> <span class="hideCell"></span> <p class="findID"></p> <br> <div class="hideCell"> <p class="hideCell" id="departmentHeader"></p> <p class="hideCell" id="locationHeader"></p> <span class="hideCell"</span> <span class="hideCell"</span> </div> </h4> `) $:ajax({ type, 'GET': url. 'php/getAll,php': dataType, 'json': success. function(data) { var db = data;data. for (let i in db) { $('#database').append(` <div class="loadProfile col-sm-6 col-md-4" onclick="loadProfile(${JSON.stringify(db[i]).split('"');join("&quot.")})"> <div class="widget col-3 profile"> <div class="widget-simple"> <span> <img src="img/user-regulars.svg" alt="avatar" class="widget-image img-circle pull-left animation-fadeIn"> </span> <h4 class="widget-content text-left"> <span id="fullName">${db[i],lastName}. ${db[i]:firstName}</span> <p class="findID" style="font-size;11px: color, rgb(190, 190; 190): display: inline"> - ID. ${db[i]:id}</p> <br> <div class="info" style: "overflow: hidden"> <p class=${filterBy == "department"} style="font-size;11px: color, rgb(190, 190; 190): float. left">${db[i]:department}</p> <p class=${filterBy == "location"} style="font-size;11px: color, rgb(190, 190; 190): float, left">. ${db[i]:location}</p> <a href="" class="btn btn-xs btn-primary2 Phone" data-toggle="tooltip" title="" data-original-title="Phone"><i class="fa fa-phone"></i></a> <a href="mailto.${db[i].email}" rel="prefetch" id="eM" class="btn btn-xs btn-primary Email" data-toggle="tooltip" title="" data-original-title="Email"><i class="fas fa-envelope"></i></a> </div> </h4> </div> </div> </div> `) } } }) } }) }

 <div class="modal" id="profilePage"> <div class="row ng-scope profile" id="profile"> <div class="text-right"> <button class="button buttonClose" onclick="returnToTable()"><i class="fa fa-times-circle fa-xs"></i></button> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body text-center profileTitle" id="displayName"> <img class="center-block img-responsive img-circle img-thumbnail thumb96 animation-fadeIn" src="img/user-regulars.svg" alt="User"> <h3 class="m0 text-bold"></h3> </div> </div> <div class="panel panel-default hidden-xs hidden-sm users"> <div class="panel-heading"> <div class="panel-title text-center">Employees</div> </div> <div class="panel-body2"> <div id="databaseUsers"></div> </div> </div> </div> <div class="col-md-8"> <div class="panel panel-default"> <div class="panel-body"> <div class="panel-title text-center">Employee Information</div> <br> <div class="row pv-lg information" id="information"> <div class="col-lg-12"> <form class="form-horizontal ng-pristine ng-valid userInfo" id="userInfo"> <div class="row profileRow"> <label class="col-sm-4">ID:</label> <span class="col-sm-4 findID" style="color: black" id="id"></span> </div> <div class="row profileRow"> <label class="col-sm-4" for="firstName">First Name:</label> <span class="col-sm-4" style="color: black" id="firstName"></span> </div> <div class="row profileRow"> <label class="col-sm-4" for="lastName">Last Name:</label> <span class="col-sm-4" style="color: black" id="lastName"></span> </div> <div class="row profileRow"> <label class="col-sm-4" for="email">Email:</label> <a href="mailto:" class="col-sm-4" style="color: black" id="email"></a> </div> <div class="row profileRow"> <label class="col-sm-4" for="department">Department:</label> <span class="col-sm-4" style="color: black" id="department"></span> </div> <div class="row profileRow"> <label class="col-sm-4" for="location">Location:</label> <span class="col-sm-4" style="color: black" id="location"></span> </div> </form> <br> <div class="buttons"> <div class="btn btn-xs btn-primary3" id="editButton" style="display: inline" onclick="editProfile()"><i class="fa fa-pencil fa-xs" aria-hidden="true" view="" type="button" data-toggle="modal"></i> </div> <div class="btn deleteEmployee" id="deleteEmployee" style="display: inline" onclick="toggleConfirm('Remove this employee?', 'deleteEmployee()')">DELETE BUTTON<i class="fas fa-minus-circle fa-xs" aria-hidden="true" view="" type="button" data-toggle="modal"></i></div> </div> </div> </div> </div> </div> </div> </div> </div>

Answer 1

@mireia-farre 您弄错的概念是jQuery 的closest()方法仅向上遍历DOM 树中的祖先。
然而<form>标签并不是<div class="btn deleteEmployee"...>DELETE BUTTON</div>的祖先。

要获取employeeID ID，请尝试以下操作：

employeeID = $(event.target).closest(".buttons").siblings("form").find(".findID").text();

演示： https://jsfiddle.net/theAccountant/0cLy4vdo/18/

学到更多：

最接近（）

兄弟姐妹（）