Question

在我的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();
})

HTML的一部分

<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>

控制台日志输出

读取Var的其他页面jQuery

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();
    }

Answer 1

您似乎想获取单击的<a>元素的ID。但是，该事件已绑定到<li>元素。

使用event.target时，它将为您提供您单击的元素。因为事件冒泡，所以它并不总是相同的元素，而可以是事件处理程序绑定到的元素的任何子元素。因此，有时您会得到<li>元素，有时会得到<a>元素，有时会得到<span>元素。如果您想一直获取第一个元素的ID，可以执行$(this).children('a').first().attr('id')。

Answer 2

问题是您有时单击文本外部的<span>，有时甚至单击<a>。只有后者具有ID。

使用$('li a').click(...)和

selectedLinkId = $(this).attr('id').toLowerCase();

通过这种方式，this始终引用<a>，从中获取id永远不会失败。

非jQuery变体是使用event.currentTarget.id.toLowerCase()，它总是指向侦听器在树上冒泡时所附加的元素。

单击JQuery中的链接时，并非总是设置var

2 个答案: