javascript - 在 jQuery 中定位上一类时遇到问题

Question

你能看看this demo吗？并让我知道为什么我无法使用

动态更改 .num 背景颜色

$(function () {
    $('.panel-group .panel .panel-heading .panel-title > a ').on('click', function () {
        $(this).prev().closest(".num").css("background-color", "red");
    });
});

$(function () {
    $('.panel-group .panel .panel-heading .panel-title > a ').on('click', function () {
        $(this).prev().closest(".num").css("background-color", "red");
    });

});

.num {
    background-color: #000000;
    padding:3px 7px 3px 7px;
    color:white;
    border-radius: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-group">
    <div class="panel">
        <div class="panel-heading">
            <div class="panel-title">
<a class="c-font" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
         <span class="num">1</span> Specify Energy Target 
        </a>
        </div>
        </div>
    </div>
</div>

Answer 1

您需要使用 find() 获取链接的子项:

$('.panel-group .panel .panel-heading .panel-title > a ').on('click', function () {
    $(this).find(".num").css("background-color", "red");
});

你的选择器也很长，只需使用:

$('.panel-title > a ').on('click', function () {
    $(this).find(".num").css("background-color", "red");
});

工作 jsfiddle