Question

请您查看this demo并告诉我为什么我无法动态更改.num背景色

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

由于.num是点击anchor的后代，请使用find()选择后代：

$(this).find(".num").css("background-color", "red");

您也可以使用children()，因为.num是直接后裔：

$(this).children(".num").css("background-color", "red");

DEMO

Answer 3

由于.closest()上升，而您的目标.num是a的孩子。

根据https://api.jquery.com/closest/

对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素

仅更新javascript：

$(function () {
    $('.panel-group .panel .panel-heading .panel-title > a ').on('click', function () {
        $(this).children(".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>

有关在jQuery中定位上一课的问题

3 个答案: