Question

我正在制作一个测验网站。每个测验都有一个包含问题（div）的表格。每个问题都包含选项（从Flask for循环生成的无线电输入）。

<div class="question">
    {{squestions[question]}}
    <br><br>
    <div class="options">
        {% for opt in opts[question] %}
            <input type="radio" class="option" name="{{question}}" value="{{opt.answerId}}">
                <a>{{opt.answer}}</a>
            </input>
            <br>
        {% endfor %}
        <br>
    </div>
</div>

我试图向用户显示哪个答案是正确的（在他们选择了什么之后）。我认为通过迭代问题的每个孩子并适当地着色它们是可能的（如果正确则为绿色，如果错误则为红色）：

$("input[name=" + question + "]").children().each(function(i) {
    if (correct == $(this).text) {
        $(this).css('color', 'green');
    } else {
        $(this).css('color', 'red');
    }
});

但是，子选择器正在返回[prevObject: r.fn.init(1)]个对象。我的目的是让它返回<a>个对象。

我不认为问题是由for循环引起的，因为当文档准备就绪时，它已经生成了所有元素。

Answer 1

<input>元素不能有孩子。答案文本应该在单选按钮之后，而不是它的孩子。

<div class="question">
    {{squestions[question]}}
    <br><br>
    <div class="options">
        {% for opt in opts[question] %}
            <input type="radio" class="option" name="{{question}}" value="{{opt.answerId}}">
            <a>{{opt.answer}}</a>
            <br>
        {% endfor %}
        <br>
    </div>
</div>

然后您的代码可以使用.next()来获取答案元素。另外，.text是一个函数，您需要使用()调用它。

$("input[name=" + question + "]").next('a').each(function(i) {
    if (correct == $(this).text()) {
        $(this).css('color', 'green');
    } else {
        $(this).css('color', 'red');
    }
});

选择输入元素的子项

1 个答案: