1

我的每个单选按钮都在 a 内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();

4

3 回答 3

1

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

.incorrect .incor { display: inline; }
于 2013-10-22T19:07:12.817 回答
1

您可以使用：

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

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

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

于 2013-10-22T19:07:36.450 回答
0

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>
于 2013-10-22T19:20:53.673 回答