0

我在这里有一个 jsfiddle：http: //jsfiddle.net/aND4g/2/我在显示文本输入值时遇到问题。

应该发生的是，如果 Option 是True or Falseor Yes or No，则 Number of Answers 文本输入应始终包含值 1（始终，此值不能更改）；如果用户随后从True or False或Yes or No选项更改为编号选项之一，则文本输入应返回 0。

如果用户将True or FalseorYes or No选项附加到表格行中，但问题是没有打开 、 或 或 的任何答案按钮，True然后将False选项更改为编号选项之一，而不是显示 0，它仍然是显示值 1。YesNo

但是，如果用户确实打开了 、 或答案按钮之一True，然后False将选项从或更改为编号选项之一，那么它确实会将文本输入中的值从 更改为。YesNoTrue or FalseYes or No10

为什么要这样做，如何解决它，以便每次选择编号选项时，它总是会出现0在文本输入中？

我相信问题出在下面但不确定：

$(this).closest('.option').siblings('.answer').find('.answers').each(function(index) {
    if (!isNaN(clickedNumber) && index < clickedNumber) {
      $(this).show();
      if (prevButton === 'True or False' || prevButton === 'Yes or No') {
        // show as blank
        $(this).closest('.option').siblings('.numberAnswer').find('.answertxt').val(0).show();
      } else {
        // show but don't change the value
        $(this).closest('.option').siblings('.numberAnswer').find('.answertxt').show();
      }
    } else {
      $(this).hide();
      $(this).removeClass('answerBtnsOn');
      $(this).addClass('answerBtnsOff');
    }
    ....

    function btnclick(btn, iQuestionIndex, bDisableAppend) {
      //var context = $(btn).parent();
      var context = $(btn).parents('tr'); // need to go up one level
      context.add(context.siblings()); // to collect siblings in other rows since the limit in each row is 7
      if (context.length == 0) {
        context = $(btn).parents('tr');
      }
      var $btn = $(btn);
      var value = btn.value;
      var id = $btn.attr('id');
      ....
      updateAnswer(context , iQuestionIndex, bDisableAppend);
      var container = $btn.closest(".optionAndAnswer");
      // here the zero gets assigned
      var answertxt = $(".answertxt", container);
      var numberison = $(".answerBtnsOn", container).length;
      var maxRowValue = $('.gridTxt', container).val();
      if (btn.id == "answerTrueRow" || btn.id == "answerFalseRow")
        return;
      if (maxRowValue === 'True or False' || maxRowValue === 'Yes or No') {
        if (answertxt.val() == 1 && numberison == 0) {
          numberison = 1;
        }
      }
      answertxt.val(numberison);
      return false;
    }

更新：

小提琴只是主应用程序的完整缩短版本。对于附加的每一行，它都算作一个问题，因此第 1 行是问题 1，第 2 行是问题 2，依此类推。在小提琴中，您在顶部选择一个选项类型、答案数量和正确答案，然后将其附加到一行中。如果您想进行更改，您可以在附加行中编辑选项类型、答案数量和正确答案。这就是为什么它被设置为它被设置的方式。

JSFIDDLE 要遵循的步骤：

True or False如果上一个选项是或Yes or No但没有打开应答按钮，查看会发生什么的步骤：

  1. 打开应用程序时，单击Open Grid链接并选择按钮True or False或Yes or No从网格中选择。然后单击Add Question按钮，这将在您选择的内容下方附加一行。

  2. 您可以在附加行的文本输入中看到 Number of answers 的值为 1，这很好。但是在附加的行中单击Open Grid并选择 3 或 4 的数字选项。答案数的文本输入不会像应有的那样更改为 0，它仍然显示 1。

True or False如果上一个选项是或Yes or No打开了应答按钮，则查看会发生什么的步骤：

  1. 从上面重复步骤 1。

  2. 重复上面的步骤 2，但在单击Open Grid更改选项之前，请选择或/或Answer行底部的按钮（取决于您选择的选项），然后将选项更改为数字选项。您会看到该值确实从 1 变为 0。TrueFalseYesNo

更新：

我的旧代码在这里有一个工作小提琴：http: //jsfiddle.net/aND4g/50/

这是最新的 jsfiddle，它不太工作：http: //jsfiddle.net/aND4g/53/

我发现小提琴和停止它工作的唯一区别是下面的代码：

var $tbody = $('#qandatbl_onthefly > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'>");
var $td = $("<td width='50%' class='extratd'>");
var $options = $("<table class='option'><tbody><tr><td>1. Option Type:</td></tr></tbody></table>");
var $noofanswers = $("<br /><table class='noofanswers'><tbody><tr><td>2. Number of Answers:</td></tr></tbody></table>");
var $answer = $("<br /><table class='answer'><tbody><tr><td>3. Answer:</td></tr></tbody></table>");
var $questionType = '';

工作版本包含以下代码：

var $tbody = $('#qandatbl_onthefly > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'>");
var $td = $("<td class='extratd'>");
var $noofanswers = $("<div class='noofanswers'>2. Number of Answers:<br/></div>");
var $options = $("<div class='option'>1. Option Type:<br/></div>");
var $answer = $("<div class='answer'>3. Answer:<br/></div>");
var $questionType = '';

如果我将$options,$noofanswers和$answer变量从<table>标签更改为<div>标签，那么它可以工作。但我希望将变量放在<table>标签而不是<div>标签中。<table>那么为什么它在标签中不起作用？

4

1 回答 1

2

发现问题：jsFiddle：http: //jsfiddle.net/NhaCN/

var $tbody = $('#qandatbl_onthefly > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'>");
var $td = $("<td width='50%' class='extratd'>");
var $options = $("<table class='option'><tbody><tr><td>1. Option Type:</td></tr></tbody></table>");
var $noofanswers = $("<br /><table class='noofanswers'><tbody><tr><td>2. Number of Answers:</td></tr></tbody></table>");
var $answer = $("<br /><table class='answer'><tbody><tr><td>3. Answer:</td></tr></tbody></table>");
var $questionType = '';

您正在创建一个带有两个标签 abr和 a的 jquery 元素table。因此，您附加到元素的任何内容都将添加到两个标签中。

工作代码

var $tbody = $('#qandatbl_onthefly > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'>");
var $td = $("<td width='50%' class='extratd'>");
var $options = $("<table class='option'><tbody><tr><td>1. Option Type:</td></tr></tbody></table>");
var $noofanswers = $("<table class='noofanswers'><tbody><tr><td>2. Number of Answers:</td></tr></tbody></table>");
var $answer = $("<table class='answer'><tbody><tr><td>3. Answer:</td></tr></tbody></table>");
var $questionType = '';

如果您需要在元素之间换行，请在此处添加：

$tr.append($td);
$td.append($options);
$td.append("<br/>");
$td.append($noofanswers);
$td.append("<br/>");
$td.append($answer);
$tbody.append($tr);
于 2012-12-29T19:56:22.187 回答