Question

我的每个单选按钮都位于div内，紧挨着输入（radio），我在一个范围内有一些文本，CSS设置为display：none。由于我有多个单选按钮，我正在尝试设置跨度以仅显示所选单选按钮旁边的跨度。想法？

这就是我目前所拥有的。

$('input:checked').next().show();

这是我试图建立的完整测验的小提琴

http://jsfiddle.net/YSSWL/96/

随意批评我剩下的jquery，因为我可能过于复杂化了。我对jquery或js（处理它）没有太多经验。

解决方案编辑：正如Chausser指出我可以使用

$('input:checked').parent().find('span').show();

选择最接近所选输入父级的范围并应用.show（）;

Answer 1

您可以使用：

$('input:checked').parent().find('span').show();

我更新了你的html以使用一些一致的类并修复你的重置功能。对于工作代码检查：

http://jsfiddle.net/YSSWL/106/

Answer 2

你可以用CSS完全解决这个问题：

.incorrect .incor { display: inline; }

Answer 3

http://jsfiddle.net/YSSWL/105/

我认为这是一个更好的写作方式。更灵活一点。对不起，我删除了一堆你的东西，以明确发生了什么。

JS：

$(document).ready(function () {
    $(document).on('click', '#radiochk1', function(){
        var checkedRadio = $('input[name="question1"]:checked');        

        $('.correct, .incorrect').removeClass('correct').removeClass('incorrect');

        if(checkedRadio.hasClass('rightAnswer')){
            checkedRadio.parent().find('span.answer').addClass('correct');
        }else{
            checkedRadio.parent().find('span.answer').addClass('incorrect');
        }
    });

    $(document).on('click', '#resetq1', function(){
        $('.correct, .incorrect').removeClass('correct').removeClass('incorrect');
        $('input[name="question1"]').attr('checked', false);
    });

});

HTML：

<form class="ra">
    <div class="cor">
        <input type="radio" name="question1" class="c1" />A. Choice A<span class="hiddencorr">Correct answer</span>

    </div>
    <div class="inc">
        <input type="radio" name="question1" class="i1" />B. <span class="answer">Choice B</span>
    </div>
    <div class="inc">
        <input type="radio" name="question1" class="i2 rightAnswer" />C. <span class="answer">Choice C</span>
    </div>
    <div class="inc">
        <input type="radio" name="question1" class="i3" />D. <span class="answer">Choice D</span>
    </div>
    <div class="inc">
        <input type="radio" name="question1" class="i4" />E. <span class="answer">Choice E</span>
    </div>
</form>
<p class="rationale1"><b>Rationale:</b> 
    <br />
    <br /><span class="rattext">Explanation of what was done wrong.</span>

 </p>
 <button id="radiochk1" class="checkhide">Check your answer</button>
 <button id="resetq1" class="reset">Reset</button>

jQuery显示当前所选按钮旁边的元素

解决方案编辑：正如Chausser指出我可以使用

3 个答案: