javascript - 如何在 jQuery 中循环一组 ID 并匹配另一组元素的事件元素属性？

Question

我正在尝试循环一组元素的 ID，并将其与另一组元素的属性 (aria-labelledby) 进行匹配，但前提是它是事件面板并且我无法找到解决方案。

$('body a').mouseenter(function() {
    e = $(this);
    btnClass = e.attr('class');
    switch (btnClass) {
        case 'nav-link':
            tabID = $(this).attr('id');
            paneID = $('#v-pills-tabContent').children();
            paneID.each(function(index) {
                console.log(index + ": " + $(this).prop('id'));
            });
            break
    }
});

.nav-link {
    display: block;
    text-decoration: none !important;
    padding: 14px;
    border-bottom: 1px solid #eff1f2;
    color: #747474;
}
#v-pills-tab a:last-child {
    border-bottom: 0;
}
.tab-content > .active {
    opacity: 1;
}
.col-3,.col-9 {
    float: left;
}
.col-9 {
    width: 250px;
}
.col-3 {
    border: 1px solid #eff1f2;
}
#v-pills-tabContent p {
    margin-bottom: 18px;
}
.day-num,.day-name,.month-name,.year-name {
    display: block;
    text-align: center;
}
.day-num,.month-name,.schedule-header {
    font-size: 28px;
}
.day-name,.year-name {
    font-size: 14px;
}
.schedule-header {
    display: block;
    text-align: center;
    line-height: 3.2em;
}
.radio-link {
    padding: 10px 20px;
    position: relative;
}
.schedule-radio {
    width: 18px;
    height: 18px;
    background: #fff;
    border: 2px solid #eff1f2;
    border-radius: 50%;
    display: inline-block;
    border-radius: 25px;
    margin: 0 10px 0 0;
    position: absolute;
    left: -6px;
    top: 8px;
}
.tab-content .no-top-margin {
    margin-top: 0 !important;
}
.tab-content > .tab-pane {
    margin-top: 22px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
        <div class="nav-link" role="tab" aria-expanded="true"><span class="month-name">Oct</span><span class="year-name">2017</span></div>
        <a class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-expanded="true">
            <span class="day-num">9</span>
            <span class="day-name">Thursday</span>
        </a>
        <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-expanded="true">
            <span class="day-num">10</span>
            <span class="day-name">Friday</span>
        </a>
        <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-expanded="true">
            <span class="day-num">11</span>
            <span class="day-name">Saturday</span>
        </a>
        <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-expanded="true">
            <span class="day-num">12</span>
            <span class="day-name">Sunday</span>
        </a>
    </div>
</div>
<div class="col-9">
    <div class="tab-pane no-top-margin" id="v-pills-currentdate" role="tabpanel" aria-labelledby="v-pills-currentdate-tab">
        <p style="margin-bottom:0;" class="no-top-margin"><span class="schedule-header">Schedule</span></p>
    </div>
    <div class="tab-content" id="v-pills-tabContent">

        <div class="tab-pane fade active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
            <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">4:05pm CST</time></span></a></p>
            <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">6:25pm CST</time></span></a></p>
            <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">7:35pm  CST</time></span></a></p>
            <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">8:25pm CST</time></span></a></p>
        </div>
        <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
            <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">5:35pm CST</time></span></a></p>
            <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">7:25pm CST</time></span></a></p>
            <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">8:15pm CST</time></span></a></p>
            <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">9:45pm CST</time></span></a></p>
        </div>
        <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
            <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">3:10pm CST</time></span></a></p>
            <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">4:35pm CST</time></span></a></p>
            <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">4:55pm CST</time></span></a></p>
            <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">5:15pm CST</time></span></a></p>
        </div>
        <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
            <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">6:15pm CST</time></span></a></p>
            <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">7:20pm CST</time></span></a></p>
            <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">7:30pm CST</time></span></a></p>
            <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">8:25pm CST</time></span></a></p>
        </div>
    </div>
</div>

我需要找到事件面板并获取其属性(aria-labelledby)。属性 (aria-labelledby) 将用于匹配另一组元素的 ID。这应该由 jQuery mouseenter 事件触发。

为了更好地理解，我在 JSFiddle 上有一个活生生的例子

Answer 1

如果您想查找 #v-pills-tabContent 的子项，其属性 aria-labelledby 等于 id单击的 a 元素，这是您应该执行的操作:

tabID = $(this).attr('id');
paneID = $('#v-pills-tabContent')
             .children('[aria-labelledby="' + tabID + '"].active')

选择器 '[aria-labelledby="' + tabID + '"].active' 将匹配 aria-labelledby 等于 tabID.