javascript - 选择输入元素的子元素

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>元素不能有 child 。答案文本应该在单选按钮之后，而不是它的子项。

<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');
    }
});