Question

环境：jQuery，html

约翰吃了一顿丰盛的午餐，所以他今晚可能想要/可能不想吃。

假设你向学生提出这个问题，他将不得不圈出（可能想要或不想要）用纸笔测试来回答它。

如果他点击这些单词并在选择其他选项时切换选择，您如何模仿在文本周围绘制圆圈。有人可以提供一些关于如何实现这个目标的基本样本吗？

有没有更好的方法来标记学生的选择？

Answer 1

THIS可能有用。

HERE您可以看到该库的一些示例。

Answer 2

理想情况下，您使用HTML单选按钮<input>元素，因为这些元素具有您正在寻找的行为。您可以在此处堆放一些不显眼的JS和CSS来隐藏实际的单选按钮并使用其<label>来获得所需的外观。

以此HTML为例：

<label><input type="radio" name="question-one" value="yes"> Yes</label>
<label><input type="radio" name="question-one" value="no"> No</label>

使用以下不显眼的jQuery，隐藏单选按钮并将其操作有效地转移到它周围的<label>：

$('input[type=radio]').each(function(){
    $(this).parent().click(function(){
        $(this).children('input').click();
        $('label').removeClass('checked');
        $('label:has(input[type=radio]:checked)').addClass('checked');
    });
}).hide();

添加一些漂亮的CSS来设置所有<label>的样式，特别是那些.checked，并且你有你想要的。

Answer 3

考虑这样的事情：

CSS

<style type="text/css">
span.answer{
    text-decoration: underline;
    border: none;
    padding: 2px;
    cursor: pointer;
}

span.answer_selected{
    border: 1px solid red;
    -webkit-border-top-right-radius: 10px; -webkit-border-top-left-radius: 10px; 
    -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 10px;
    -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; 
    -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px;
}
</style>

的Javascript

<script type="text/javascript">
$(document).ready(function(){
    $("div.question > span.answer").click(function() { 
            $(this).siblings(".answer").removeClass("answer_selected");
            $(this).addClass("answer_selected"); 
        }
    );
});
</script>

HTML

    <div class="question" id="q_1">question 1<br/>
        <span class="answer" id="a_1">answer one</span> /
        <span class="answer" id="a_2">answer two</span>
    </div>

    <div class="question" id="q_2">question 2<br/>
        <span class="answer" id="a_1">answer one</span> /
        <span class="answer" id="a_2">answer two</span>
    </div>

这个想法应该很容易适应jQuery插件。您可以更改HTML标记以反映表单或其他任何您想到的内容。

如果你愿意，你可以让答案“解开”：

<script type="text/javascript">
$(document).ready(function(){
    $("div.question > span.answer").click( function() { 
        if ($(this).hasClass("answer_selected")){
            $(this).removeClass("answer_selected");         
        } else {
            $(this).siblings(".answer").removeClass("answer_selected");
            $(this).addClass("answer_selected"); 
        }
    });
});
</script>

警告：css3不是最终的，互联网资源管理器和歌剧都不会呈现你漂亮的圆形边框。答案将是......呃，“平方。”

如何绘制圆圈来表示html中的选择

3 个答案: