Question

我正在构建一个测验，该测验有几个问题，用户可以选择3个可能的选项，由a，b或c标识。他们只能根据<ul>（问题）选择一个答案，如果他们选择其他选项，则取消选择上一个选项。

这是我到目前为止的HTML标记：

<div class="question">
                        <h3>1. If you have a choice how do you prefer to talk to people?</h3>
                        <ul class="abc Clearfix">
                            <li>
                                <a class="a" href="javascript:void(false);">
                                    <span class="letter">A</span>
                                    <span class="image"></span>
                                    <span class="title">By Text or Email</span>
                                </a>
                            </li>
                            <li>
                                <a class="b" href="javascript:void(false);">
                                    <span class="letter">B</span>
                                    <span class="image"></span>
                                    <span class="title">Talk on the phone</span>
                                </a>
                            </li>
                            <li>
                                <a class="c" href="javascript:void(false);">
                                    <span class="letter">C</span>
                                    <span class="image"></span>
                                    <span class="title">In person</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="question">
                        <h3>2. If you wanted to cook a meal how would you do it?</h3>
                        <ul class="abc Clearfix">
                            <li>
                                <a class="a" href="javascript:void(false);">
                                    <span class="letter">A</span>
                                    <span class="image"></span>
                                    <span class="title">Read through a recipe</span>
                                </a>
                            </li>
                            <li>
                                <a class="b" href="javascript:void(false);">
                                    <span class="letter">B</span>
                                    <span class="image"></span>
                                    <span class="title">Get someone to talk you through it</span>
                                </a>
                            </li>
                            <li>
                                <a class="c" href="javascript:void(false);">
                                    <span class="letter">C</span>
                                    <span class="image"></span>
                                    <span class="title">In person</span>
                                </a>
                            </li>
                        </ul>
                    </div>

这是jQuery：

 $(".abc li a").click(function ()
    {
        $(this).toggleClass('selected');
    });

1。）我如何制作每个问题只能选择一个选项

2。）如果用户改变了想法，我如何取消选择上一个选项

Answer 1

这将取消选择所有选项，然后选择用户单击的选项。意思是一次只选择一个。如果再次单击它，也将取消选择所选项目。

$(".abc li a").click(function () {
    var t = $(this);
    var ul = t.closest('ul.abc');
    var selected = t.hasClass('selected');
    ul.find('li a').removeClass('selected');
    if (!selected)
        t.addClass('selected');
});

示例 - http://jsfiddle.net/huW4k/1/

Answer 2

正如 Richard D 所指出的那样，单选按钮将是理想的解决方案。您也可以使用jQuery来操纵它们，如果这是阻止您使用它们的原因。

如果您绝对想使用当前的html，可以使用此jQuery代码：

$(".abc a").click(function () {
    $(this).parent('ul').find('a').removeClass('selected')
    $(this).addClass('selected');
});

这是相同的代码，如果已经选择了项目，将取消选择该项目。

$(".abc a").click(function () {
    isSelected = $(this).hasClass('selected');
    $(this).parent('ul').find('a').removeClass('selected')
    if(!isSelected) $(this).addClass('selected');
});

jQuery：允许用户每个UL只选择一个链接

2 个答案: