当单击JQuery中的链接时，var并不总是设置
当单击JQuery中的链接时，var并不总是设置
提问于 2019-07-18 09:50:39
在我的index.html中，我有一个JQuery var，当用户单击左手菜单中的一个选项时，需要设置它，并根据所选内容显示/隐藏字段，因为页面在3页之间共享，但根据选项显示不同的字段。
但我有一个问题，有时当选项被选中时，它没有像预期的那样设置var，然后在其他几次点击之后，它决定打球并设置它，然后当它想要的时候，它会再次停止。
没有错误
JQuery
$('li').on('click', function (event) {
selectedLinkId = event.target.id.toLowerCase();
// Admin menu option clicked
if ($(this).is($("li[name*='admin']"))) {
selectedLink = 'adminMenuOption';
}
// Reseller menu option clicked
else if ($(this).is($("li[name*='reseller']"))) {
selectedLink = 'resellerMenuOption';
}
// Channel menu option clicked
else if ($(this).is($("li[name*='channel']"))) {
selectedLink = 'channelMenuOption';
}
// Customer menu option clicked
else if ($(this).is($("li[name*='customer']"))) {
selectedLink = 'customerMenuOption';
}
// Any other menu option clickedf
else {
selectedLink = 'generalMenuOption';
}
$('#mainSearchSection').show();
})的一部分
<ul class="nav nav-tabs nav-pills flex-column" role="tablist">
<li class="nav-item" id="adminSearchLink" name="adminOptions">
<div class="nav-link d-flex align-items-center option pl-6">
Search for
<i id="adminSearchMenuIcon" class="material-icons ml-auto mr-0">arrow_drop_up</i>
</div>
</li>
<li class="nav-item" name="adminSearchOptions">
<a id="adminSearchCustomerLink" class="nav-link d-flex align-items-center option" href="#" data-toggle="tab" role="tab" aria-selected="false">
<span class="ml-5 pl-4">Customer</span>
</a>
</li>
<li class="nav-item" name="adminSearchOptions">
<a id="adminSearchNumberLink" class="nav-link d-flex align-items-center option" href="#" data-toggle="tab" role="tab" aria-selected="false">
<span class="ml-5 pl-4">Number</span>
</a>
</li>
<li class="nav-item" name="adminSearchOptions">
<a id="adminSearchResellerLink" class="nav-link d-flex align-items-center option" href="#" data-toggle="tab" role="tab" aria-selected="false">
<span class="ml-5 pl-4">Reseller</span>
</a>
</li>
</ul>Console.Log输出
其他页面JQuery，它读取Var
var selectedLinkId;
if (selectedLinkId.includes('reseller')) {
$('#accStatusCol, #companyNameCol, #nameFieldCol').show();
$('#nameField').focus();
} else if (selectedLinkId.includes('channel')) {
$('#accStatusCol, #companyNameCol, #nameFieldCol').hide();
} else if (selectedLinkId.includes('customer')) {
$('#accStatusCol, #companyNameCol').show();
$('#companyNameField').focus();
}回答 2
Stack Overflow用户
回答已采纳
发布于 2019-07-18 10:31:34
您似乎希望获得单击的<a>元素的id。但是，该事件被绑定到<li>元素。
当您使用event.target时，它将提供您单击的元素。由于事件正在冒泡，所以它并不总是相同的元素，而是事件处理程序绑定到的元素的任何子元素。因此，有时您会得到<li>元素，有时是<a>元素，有时是<span>元素。如果您想每次都获得第一个元素的id，就可以执行$(this).children('a').first().attr('id')。
Stack Overflow用户
发布于 2019-07-18 10:51:57
问题是，您有时单击<span>，有时单击文本之外的<a>。只有后者有身份证明。
使用$('li a').click(...)和
selectedLinkId = $(this).attr('id').toLowerCase();这样，this总是引用<a>，并从中获得id，这一点从未失败过。
非jQuery变体是使用event.currentTarget.id.toLowerCase()，它总是引用侦听器在树上冒泡时附加到的元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57091739
复制相关文章
相似问题
腾讯云开发者
