代码在不应该生效时生效 [英] Code is taking effect when it shouldn't be
问题描述
我有一个函数，如果用户点击一个按钮，它会在文本框中显示一个值，并在点击#btn"按钮后触发另一个函数:
I have a function where if the user clicks on a button, it will display a value in the textbox and it will perform a trigger to another function after a '#btn' button is clicked:
function addwindow(numberAnswer, gridValues, btn) {
$('#mainNumberAnswerTxt').val(numberAnswer).data('data-ignore',true);
$('#btn'+gridValues).trigger('click');
}
现在我想做的是:
如果用户单击添加"按钮，则将答案数"列中的数字显示到文本框中，或者换句话说，从
addwindow()执行此操作功能:
$('#mainNumberAnswerTxt').val(numberAnswer).data('data-ignore',true);
如果用户点击了 #btn+gridValues 按钮，则在当前打开的按钮数量的文本框中显示数字，或者换句话说，执行此代码:
If the user has clicked on a #btn+gridValues button, then display the number in the textbox of the number of buttons which are currently turned on or in other words perform this code:
if ($('#mainNumberAnswerTxt').data('data-ignore') != true) {$('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : 0);}
问题是第 1 步工作正常，在用户单击添加"按钮后，它会显示文本框中答案数"列中的数字.
The problem is that step 1 works fine, it does display the number from the "Number of Answers" column in the textbox after the user has clicked on the "Add" button.
问题是第 2 步，在用户单击 #btn+gridValues 按钮后，它没有显示当前打开的按钮数量的正确数字.它只是没有改变文本框中的数字.
The problem is step 2, it is not displaying the correct number on how many buttons are currently turned on after the user has clicked on the #btn+gridValues button.It just doesn't change the number in the textbox.
有谁知道为什么会发生这种情况以及如何解决这个问题?
Does anyone know why this is happening and how thi can be fixed?
演示:
这是该应用程序的演示.请按照以下步骤操作:
Here is a demo of the application. Please follow the steps below:
步骤 1:在左侧，您会看到一个绿色的加号按钮，单击它会打开一个模式窗口.第二步:在模态窗口有一个搜索栏，输入AAA"并提交搜索，你会看到一堆行出现.第三步:在最后一行，在答案数"栏下看到数字4，点击该行内的添加"按钮，模态窗口将关闭.
Step 1: On left hand side you will see a green plus button, click on it and it opens up a modal window. Step 2: In modal window there is a search bar, type in "AAA" and submit search, you will see a bunch of rows appear. Step 3: In the last row, you see under "Number of Answer" colum that it contains the number 4, click on the "Add" button within this row, the modal window will close.
您将看到文本框在文本框中显示数字 4，这很好，因为这是添加行时答案数"列下的行内的数字.
You will see that the textbox displays the number 4 in the textbox which is fine as that was the number within the row under the "Number of Answers" column when you added the row.
但下面是问题:
第 4 步:如果您单击打开网格"链接并选择按钮 3，您将看到下面的字母按钮变为 A-C，并且仅打开了字母B".
Step 4: If you click on the "Open Grid" link and select button 3, you will see the letter buttons below change to A-C with only letter "B" turned on.
在文本框中它应该显示数字 1，因为只有 1 个按钮被打开，但它不显示这个数字，这就是我遇到的问题.
In the textbox it should display number 1 as only 1 button is turned on, but it doesn't display this number and that is the problem I am having.
如何解决这个问题?
推荐答案
问题来自于您将 $('#mainNumberAnswerTxt') 上的数据属性设置为 false 的事实但您正在检查输入(点击中的this).
The problem comes from the fact taht you're setting the data-attribute to false on the $('#mainNumberAnswerTxt') but you're checking against the inputs (this in the click).
一种解决方案是进行以下测试 if ($('#mainNumberAnswerTxt').attr('data-ignore') != true)
One solution would be to do the following test if ($('#mainNumberAnswerTxt').attr('data-ignore') != true)
编辑
为了确保忽略进程只执行一次(当网格在模态后重新加载时)，您必须在测试后更改块内的内容:
To ensure that the ignore process execute only once (when the grid is reloaded after the modal), you'll have to change what's inside the block after the test:
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);
}
EDIT2
主要问题是您在设置后重新影响了 $('#mainNumberAnswerTxt').val(numberAnswer).您试图通过 ignore 属性忽略它.
The main problem is that your reaffecting the $('#mainNumberAnswerTxt').val(numberAnswer) after setting it. Your trying to ignore it through the ignoreattribute.
我想说的是删除该属性的所有出现并更改以下功能
What i would adivse, would be to remove every occurence to that attribute and to change the following function
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;
}
为了在视觉变化发生后修改值.
In order to modify the value after the visual changes took place.
这篇关于代码在不应该生效时生效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
