如何在点击“添加”按钮后更改答案按钮?
问题描述:
我有一个应用程序[这里] [1],用户可以选择他们的选项和答案。请按照以下步骤申请。如何在点击“添加”按钮后更改答案按钮?
- 第1步:当您打开应用程序时,你会看到“打开网格”链接, 单击它并选择一个选项类型,你选择一个选项后, 将在底部显示的答案按钮。例如,如果您选择的 选项为“5”,则它将显示5个应答按钮“A-E”, 如果选项选择为8,则将显示8个应答按钮“A-H”。
现在这很好。正如您所看到的,根据从网格中选择的选项显示正确数量的答案按钮。但是我的问题是如果用户想要添加以前的选项。请看下面的步骤:
- 第2步:您会看到左手边一个绿色的加号按钮,点击它 ,这将打开一个模态窗口。
- 步骤3:在搜索框中输入“AAA”,然后点击“提交”按钮,它将显示来自数据库的行。
- 第4步:如果你看第一行,你可以看到在“选项类型”列下,它是A-D。点击“添加”按钮选择此行。
会发生什么事是, 模态窗口将关闭,如果你看一下答案,选项 在右手侧控制,你可以看到选项类型 文本框包含数字4(这是因为选项类型是“AD”,所以有4个选项“A,B,C,D”),所以它应该显示答案按钮AD但它没有,它根本不会改变答案按钮,它们仍然是相同。
所以我的问题是我怎么才能得到正确的答案按钮出现在用户点击“添加”按钮后?
下面是它进口的答案按钮选项从电网选择后的代码:
$('.gridBtns').on('click', function()
{
var clickedNumber = this.value;
$(this).closest('.option').siblings('.answer').find('.answers').each(function(index) {
if (!isNaN(clickedNumber) && index < clickedNumber) {
$(this).show();
} else {
$(this).hide();
$(this).removeClass('answerBtnsOn');
$(this).addClass('answerBtnsOff');
}
var $this = $(this);
var context = $this.parents('.optionAndAnswer');
console.log($this);
});
if (clickedNumber === 'True or False') {
$(this).closest('.option').siblings('.answer').find('input[name=answerTrueName]').show();
$(this).closest('.option').siblings('.answer').find('input[name=answerFalseName]').show();
} else if (clickedNumber === 'Yes or No') {
$(this).closest('.option').siblings('.answer').find('input[name=answerYesName]').show();
$(this).closest('.option').siblings('.answer').find('input[name=answerNoName]').show();
}
getButtons();
});
});
function getButtons()
{
var i;
if (initClick == 0) {
for (i = 65; i <= 90; i++) { // iterate over character codes for A to Z
$("#answer" + String.fromCharCode(i)).removeClass("answerBtnsOn").addClass("answerBtnsOff");
}
initClick = 1;
}
// code above makes sure all buttons start off with class answerBtnsOff, (so all button are white).
}
下面是函数,其中它控制“添加”按钮被点击后,会发生什么:
function addwindow(numberAnswer,gridValues) {
if(window.console) console.log();
if($(plusbutton_clicked).attr('id')=='mainPlusbutton') {
$('#mainNumberAnswerTxt').val(numberAnswer);
$('#mainGridTxt').val(gridValues);
} else {
$(plusbutton_clicked).closest('tr').find('input.numberAnswerTxtRow').val(numberAnswer);
$(plusbutton_clicked).closest('tr').find('input.gridTxtRow').val(gridValues);
}
$.modal.close();
return false;
}
答
分析完上面的代码以及你给出的链接的HTML源代码后,看起来你只是落后了一步。您只将网格值(在上面的情况下为4)分配给mainGridTxt输入框中。您需要触发网格按钮上的点击事件。
把下面的代码后$ model.close
$('#btn'+gridValues).trigger('click');
上面的代码将触发格按钮的Click事件ID为 'btn4'。
开放的网格链接似乎被打破,得到一个错误'价值是未定义的' – quickshiftin 2012-07-06 17:10:49
@quickshiftin你确定,因为我测试了它,它似乎很好。不要使用Internet Explorer。如果有的话,请使用chrome或firefox – user1490145 2012-07-06 17:24:44
@ user1490145您的应用程序可以在任何浏览器上使用,先生。 – 2012-07-06 17:29:16