jquery - 单击单选按钮，突出显示 jQuery 中的 <p> 标记

Question

我有两个单选按钮，下面有自己的标签和段落。这是它的样子:

HTML

<input type="radio" id="less_7" name="duration" />
<label for="less_7" id="label_7">Less 7</label>
<p>Less 7</p>

<input type="radio" id="7_10" name="duration" />
<label for="7_10" id="label_10">7 to 10</label>
<p>7 to 10</p>

CSS

label {
    font-weight: normal;
}
.strong {
    font-weight: bold;
}

jQuery

$(document).ready(function() {
    $('label').click(function() {
        $('label').removeClass('strong');
        $(this).addClass('strong');
    });
});

单击单选按钮时，我希望最接近它的段落标记以强类突出显示。单击任何其他单选按钮时，其段落应突出显示，而前一个应失去其类别。

目前，我能够突出显示相应的标签。我想将类 strong 设置为它下面的段落。

我的工作 fiddle -> https://jsfiddle.net/ajitks/x83mpjzw/

如果下一个类可以使用，如何选择$(this + p)？

Answer 1

您可以使用 next :

$(document).ready(function() {
    $('label').click(function() {
        $('label').removeClass('strong');
        $('label').next('p').removeClass('strong');
        $(this).next('p').addClass('strong');
        $(this).addClass('strong');
    });
});

已更新 JSFiddle