Question

我是使用JQuery mobile的测验应用程序。每个问题都有4个选项（单选按钮）。如果用户选择了正确的选项，那么我需要在选项旁边显示右图标。如果所选选项错误，那么我需要在所选选项旁边添加错误图标，并在右边答案旁边添加右图标。请帮助我如何在Jquery mobile中实现它？

谢谢，

Answer 1

这是 DEMO

在单选按钮标记中，标签包含隐藏在“隐藏”类中的图像：

<fieldset data-role="controlgroup" class="question">
<legend>Question 1:</legend>
    <input type="radio" name="radio-choice-v-2" id="radio-choice-v-2a" value="A" />
    <label for="radio-choice-v-2a">Answer A <img class="correct hide" src="http://iconizer.net/files/C9d/orig/check.png" /> </label>
    <input type="radio" name="radio-choice-v-2" id="radio-choice-v-2b" value="B" />
<label for="radio-choice-v-2b">Answer B <img class="wrong hide" src="https://cdn1.iconfinder.com/data/icons/perfect-flat-icons-2/24/Delete_remove_close_exit_trash_cancel_cross.png" /></label>
    <input type="radio" name="radio-choice-v-2" id="radio-choice-v-2c" value="C" />
<label for="radio-choice-v-2c">Answer C<img class="wrong hide" src="https://cdn1.iconfinder.com/data/icons/perfect-flat-icons-2/24/Delete_remove_close_exit_trash_cancel_cross.png" /></label>

 .hide {
    display: none;
}

脚本处理单选按钮上的更改事件。无论点击哪个答案，它都会显示正确的图像，然后如果单击了错误的答案，则会显示该答案的错误图像。我通过添加/删除隐藏类来显示/隐藏。

$(document).on("pageinit", "#page1", function(){
    $("input[name='radio-choice-v-2']").on("change", function () {
        $('.correct').removeClass('hide'); //show correct
        $('.wrong').addClass('hide'); //hide all wrong images

        var label = $("label[for='"+$(this).prop('id')+"']");
        if (label.find(".wrong").length > 0){
            label.find(".wrong").removeClass('hide'); //show wrong if wrong answer clicked
        }
    });
});

如何动态地将图像添加到jquery mobile中的单选按钮文本？

1 个答案: