jQuery顯示當前選中按鈕旁邊的元素

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>