Question

每个div（页面）我有两个问题，如下所示：

<div id="page5" class="page" style="display:none;">
                    <div class="question">
                        <h3>9. You are trying to remember a pin number, what are you most likely?</h3>
                        <ul class="abc Clearfix">
                            <li>
                                <span>
                                    <a class="a" href="javascript:void(false);">
                                        <span class="letter">A</span>
                                        <span class="image"></span>
                                        <span class="title">Imagine the numbers in your head</span>
                                    </a>
                                </span>
                            </li>
                            <li>
                                <span>
                                    <a class="b" href="javascript:void(false);">
                                        <span class="letter">B</span>
                                        <span class="image"></span>
                                        <span class="title">Repeat the numbers out loud</span>
                                    </a>
                                </span>
                            </li>
                            <li>
                                <span>
                                    <a class="c" href="javascript:void(false);">
                                        <span class="letter">C</span>
                                        <span class="image"></span>
                                        <span class="title">Try out the pattern of the numbers on a keypad</span>
                                    </a>
                                </span>
                            </li>
                        </ul>
                    </div>
                    <div class="question">
                        <h3>10. How would you tell if a friend was upset?</h3>
                        <ul class="abc Clearfix">
                            <li>
                                <span>
                                    <a class="a" href="javascript:void(false);">
                                        <span class="letter">A</span>
                                        <span class="image"></span>
                                        <span class="title">Notice the expression on their face</span>
                                    </a>
                                </span>
                            </li>
                            <li>
                                <span>
                                    <a class="b" href="javascript:void(false);">
                                        <span class="letter">B</span>
                                        <span class="image"></span>
                                        <span class="title">Listen to what they say</span>
                                    </a>
                                </span>
                            </li>
                            <li>
                                <span>
                                    <a class="c" href="javascript:void(false);">
                                        <span class="letter">C</span>
                                        <span class="image"></span>
                                        <span class="title">Pick up on their body language</span>
                                    </a>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>

我有一些jQuery代码允许用户为每个问题选择一个链接（他们每个问题只能选择一个）。它们总共有5页，用户可以使用下一组和上一组链接进行导航。我想要做的是检查具有页面类的div在其链接上是否有两个选定的类，否则在用户尝试单击按钮时显示警告。

选择选项的代码。

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

用于在页面间跳转的导航按钮：

<div class="page-navigation Clearfix">
                                <a id="quiz-prev" class="Prev" href="javascript:void(false);" style="display:none;">
                                    <span>Prev</span>
                                </a>
                                <a id="quiz-next" class="Next" href="javascript:void(false);">
                                    <span>Next</span>
                                </a>
                                <a id="quiz-finish" class="Finish" href="javascript:void(false);" style="display:none;">
                                    <span>Finish</span>
                                </a>
                            </div>

和下一个按钮的代码：

   $("#quiz-next").click(function () {
        $(".page:visible").hide().next().show();
    });

因此，如果用户在page1上并且只点击了一个选项，即。只有一个链接有一个选定的类，然后当他们点击下一个链接时，它会显示一个提示“请填写所有问题”。 注意：我已经添加了代码来隐藏和显示基于他们正在查看的页面的按钮，因此不需要这样做

当用户到达最后一页时，会出现一个完成按钮，因此需要检查用户是否选择了10个选项，因此需要计算类或类似的类。为所有可以提供帮助的人再次欢呼。

有人可以帮忙吗？感谢。

编辑：如果没有点击两个选项，我试图显示警告。但它始终显示警报

$('#quiz-next').click(function ()
{
    var allOK = true;
    $('div.page > div.question').each(function () {
        allOK = allOK && $('a.selected', this).length == 1;
        return allOK;
    });

    if (allOK == false)
    {
        alert("Please fill in all questions");
    }
    else {
        $(".page:visible").hide().next().show();
    }
});

Answer 1

所以，基本上你需要做的是：

在<div class="page">中，您有多个<div class="question">。在触发事件中，您需要确保每个问题div 只有一个 <a class="selected">才能继续。

以下代码应该能够做到这一点：

var allOK = true;
$('div.page > div.question').each(function() {
    allOK = allOK && $('a.selected', this).length == 1;
    return allOK; // if false, we don't need to check the rest
});

运行此代码后，allOK会告诉您是否适合。它seems to work，至少=）（你必须手动将选择类放在那里......）

注意：这将检查当前呈现的所有 <div class="page">（这似乎是您想要的最后一页）。要一次只检查一个div，您必须将div.page选择器更改为唯一标识该特定div的内容 - 使用示例代码，您可以使用#page5代替。

jQuery：检查每个div是否存在两个类

1 个答案: