Question

我的应用程序问题是here。请按照以下步骤操作：

当您打开应用程序时，单击“打开网格”并选择选项4.按钮A，B，C和D将显示在下面。
在“答案数”文本框中，键入数字1.然后单击A，B，C或D中的1个按钮（所选按钮将变为绿色）。完成后，单击“添加问题”按钮。
正如您所看到的，您在顶部输入的详细信息将在下方的新行中显示。在您添加的新行中，在“答案数”列下的文本框中，将数字1更改为2.现在单击下面的“提交详细信息”按钮。

应出现一条警告，指出“您选择的答案少于所需金额”。这是正确的，因为在文本框中你说你想要“2”个答案，但在“答案”栏下你只选择了1个答案（已经变为绿色的按钮）。

问题在于您按照以下几个步骤进行操作。

再次单击“添加问题”按钮，以便在顶部添加包含详细信息的第二行。
在第二行中，您已将“答案数”文本框下的文本框中的值从1更改为3，并从按钮A，B，C或D中选择3个答案（3个按钮必须转动绿色）。
现在点击“提交详细信息”按钮。这次出现警报，显示两条消息，指出“您选择的答案多于所需金额”。

这是完全错误的，因为在第一行中，您选择的答案少于规定的数量，在第二行中您选择了适当数量的按钮，因此它应该会出现一条警告，指出“您选择的数量较少”答案超过了所需的数量“因为这对第一行来说是正确的。

我的问题：

为什么它会显示这个奇怪的警报？为什么2条消息应该在警报中应该是1条消息？此外，如果多行中存在错误，那么我只会在顶行显示警告。当修复后，我想要下一行的警告，依此类推。

下面是相关的验证码（我认为问题是var上下文，因为我认为变量是错误的，但我不确定）：

 function validation() {

                var context = $('#qandatbl');
    var currenttotal = context.find('.answerBtnsOn').length;    

    alertValidation= "";
        // Note, this is just so it's declared...

        $(".numberAnswerTxtRow").each(function() {
        if (!this.value) {
            alertValidation += "\nPlease Enter in the Number of Answers you Require for this question\n";
        }
    else if (currenttotal > $(this).val()){
        alertValidation += "\nYou have selected more answers than the required amount\n";
    }

    else if (currenttotal < $(this).val()) {
        alertValidation += "\nYou have selected less answers than the required amount\n";
    }
    });


    if(alertValidation != "")
    {
        alert(alertValidation);
        return false;
    }

Answer 1

var context = $('#qandatbl');
var currenttotal = context.find('.answerBtnsOn').length;

这会计算在整个表格中选择的按钮数量，而不仅仅是当前行。您应该使用$.each中的行代替

 $(".numberAnswerTxtRow").each(function() {
     var currenttotal = $(this).closest('.optionAndAnswer')
                               .find('.answerBtnsOn')
                               .length;

请注意，无论如何，您的州应该与DOM分开，但是因为您已经完成了所有这样的操作......

正在显示不正确的警报

1 个答案: