javascript - 代码在不应该生效的时候生效

Question

我有一个功能，如果用户点击一个按钮，它会在文本框中显示一个值，并且它会在点击“#btn”按钮后触发另一个功能:

function addwindow(numberAnswer, gridValues, btn) { 
    $('#mainNumberAnswerTxt').val(numberAnswer).data('data-ignore',true);
    $('#btn'+gridValues).trigger('click');       
 }

现在我要做的是:

1. 如果用户单击“添加”按钮，则将“答案数”列中的数字显示到文本框中，或者换句话说，从 addwindow() 执行此操作功能:

   $('#mainNumberAnswerTxt').val(numberAnswer).data('data-ignore',true);

2. 如果用户点击了 #btn+gridValues 按钮，则在文本框中显示当前打开的按钮数量，或者换句话说，执行此代码:

   if ($('#mainNumberAnswerTxt').data('data-ignore') != true) {
$('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : 0);
}

问题是第 1 步工作正常，在用户单击“添加”按钮后，它会在文本框中显示“答案数”列中的数字。

问题出在第 2 步，在用户单击 #btn+gridValues 按钮后，它没有显示当前打开的按钮数量的正确数字。它只是没有改变文本框中的数字。

有谁知道为什么会发生这种情况以及如何解决？

演示:

这是一个demo的应用程序。请按照以下步骤操作:

第 1 步:在左侧您会看到一个绿色的加号按钮，单击它会打开一个模态窗口。第 2 步:在模态窗口中有一个搜索栏，输入“AAA”并提交搜索，您会看到出现一堆行。第 3 步:在最后一行的“Number of Answer”列下，您会看到它包含数字 4，单击该行中的“Add”按钮，模态窗口将关闭。

您会看到文本框在文本框中显示数字 4，这很好，因为这是您添加行时“答案数”列下行内的数字。

但下面是问题:

第 4 步:如果您单击“打开网格”链接并选择按钮 3，您将看到下面的字母按钮变为 A-C，并且只有字母“B”处于打开状态。

在文本框中，它应该显示数字 1，因为只有 1 个按钮被打开，但它不显示这个数字，这就是我遇到的问题。

如何解决这个问题？

Answer 1

问题来自于您在 $('#mainNumberAnswerTxt') 上将数据属性设置为 false 但您正在检查输入 (this 在点击中)。

一种解决方案是执行以下测试 if ($('#mainNumberAnswerTxt').attr('data-ignore') != true)

编辑

为了确保忽略过程只执行一次(当网格在模态之后重新加载时)，您必须在测试后更改 block 内的内容:

if ($('#mainNumberAnswerTxt').data('ignore') != true) {
    $('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : 0);
} else {
    /*reset the ignore flag*/
    $('#mainNumberAnswerTxt').data('ignore',false);
}

编辑2

主要问题是您在设置后重新影响 $('#mainNumberAnswerTxt').val(numberAnswer)。您试图通过 ignore 属性忽略它。

我建议的是删除该属性的所有事件并更改以下函数

function addwindow(questionText,textWeight,numberAnswer,gridValues,reply,btn) {
    var answers = $.map(btn.split(''),function(chr){ return "#answer"+chr; }).join(', ');
    if($(plusbutton_clicked).attr('id')=='mainPlusbutton') {
        var myNumbers = {};
        myNumbers["A-C"] = "3";
        myNumbers["A-D"] = "4";
        myNumbers["A-E"] = "5";
        myNumbers["A-F"] = "6";
        myNumbers["A-G"] = "7";
        gridValues = myNumbers[gridValues];
        $('#mainNumberAnswerTxt').show();
        $('#mainNumberAnswerTxt').val(numberAnswer).data('ignore',true);
        $('#mainGridTxt').val(gridValues).parent().append($('.optionTypeTbl'));
        $('#btn'+gridValues).trigger('click');
        $('.answers.answerBtnsOn').removeClass('answerBtnsOn').addClass('answerBtnsOff');
        $(answers).addClass("answerBtnsOn").siblings().addClass('answerBtnsOff');
    }
    $.modal.close();
    return false;
} 

到:

function addwindow(questionText,textWeight,numberAnswer,gridValues,reply,btn) {
    var answers = $.map(btn.split(''),function(chr){ return "#answer"+chr; }).join(', ');
    if($(plusbutton_clicked).attr('id')=='mainPlusbutton') {
        var myNumbers = {};
        myNumbers["A-C"] = "3";
        myNumbers["A-D"] = "4";
        myNumbers["A-E"] = "5";
        myNumbers["A-F"] = "6";
        myNumbers["A-G"] = "7";
        gridValues = myNumbers[gridValues];
        $('#mainNumberAnswerTxt').show();
        $('#mainGridTxt').val(gridValues).parent().append($('.optionTypeTbl'));
        $('#btn'+gridValues).trigger('click');
        /* moved the following line below the click simulation, 
           hence its value will be changed regardless of what happened during the click simulation*/
        $('#mainNumberAnswerTxt').val(numberAnswer);
        $('.answers.answerBtnsOn').removeClass('answerBtnsOn').addClass('answerBtnsOff');
        $(answers).addClass("answerBtnsOn").siblings().addClass('answerBtnsOff');
    }
    $.modal.close();
    return false;
} 

为了在发生视觉变化后修改值。