0

我在这里有一个 jsfiddle ，您可以使用它来查看我的应用程序的基本演示以及我遇到的问题。

当您打开小提琴时，请按照以下步骤操作：

  1. 您将看到一个“Open Grid”链接，单击该链接并选择“True or False”或“Yes or No”按钮。
  2. 选择任一按钮后，您将看到其答案按钮出现在下方。
  3. 请单击“添加问题”按钮，这会将表格行附加到下面的表格中。
  4. 现在在附加的行中是问题。如果您单击附加行中的“打开网格”链接并选择其中一个按钮，您会发现下方相应的答案按钮消失了。它们应该显示而不是消失。

所以我的问题是，任何人都可以修改演示，以便当用户单击附加行中的“打开网格”链接时，他们可以获得相应的答案按钮出现在附加行中？

我认为问题可能在这段代码中，但我不确定：

 var count = 0;
var plusbutton_clicked;
var gQuestionIndex = 0;

function insertQuestion(form) {

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




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

    gQuestionIndex++;

    $('.gridTxt', context).each(function() {

        var $this = $(this);
        var $optionsText = $("<input type='text' class='gridTxtRow maxRow' readonly='readonly' />").attr('name', $this.attr('name') + "[]").attr('value', $this.val()).appendTo($options).after("<span href='#' class='showGrid'>[Open Grid]</span>");

        $questionType = $this.val();

    });

    var $this, i = 0,
        $row, $cell;
    $('#optionAndAnswer .answers').each(function() {
        $this = $(this);
        if (i % 7 == 0) {
            $row = $("<tr/>").appendTo($answer);
            $cell = $("<td/>").appendTo($row);
        }
        var $newBtn = $(("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this, " + gQuestionIndex + ");' />").replace('%s', $this.is(':visible') ? 'inline-block' : 'none')).attr('name', "value[" + gQuestionIndex + "][]").attr('value', $this.val()).attr('class', $this.attr('class')).attr('id', $this.attr('id') + 'Row');
        $newBtn.appendTo($cell);

        i++;
    });



    $tr.append($td);
    $td.append($options);
    $td.append($answer);
    $tbody.append($tr);

    count++;

    $('#optionAndAnswer .answerBtns').hide();

    $('#optionAndAnswer .answerBtns').removeClass('answerBtnsOn').addClass('answerBtnsOff');

    updateAnswer($answer, gQuestionIndex);


}

谢谢

4

1 回答 1

0

我认为主要问题可能在insertQuestion().

据我所知：

  • $cell 是有条件定义的，但该行$newBtn.appendTo($cell);是无条件的。当条件不满足时，追加语句将静默失败（无错误消息）。
  • 即使在满足条件的情况下，$newBtn也成功附加到$cell，$cell并附加到$row，但 $row 从未附加到任何内容。因此没有 newBtns 将出现在 DOM 中。

编辑：

尝试更换：

    if (clickedNumber === 'True or False') {
        $(this).closest('.option').siblings('.answer').find('input[name="answerName[True]"]').show();
        $(this).closest('.option').siblings('.answer').find('input[name="answerName[False]"]').show();
    } else if (clickedNumber === 'Yes or No') {
        $(this).closest('.option').siblings('.answer').find('input[name="answerName[Yes]"]').show();
        $(this).closest('.option').siblings('.answer').find('input[name="answerName[No]"]').show();
    }

和 ：

var ans = $(this).closest('.option').siblings('.answer').find('input');
if (clickedNumber === 'True or False') {
    ans.filter('[value="True"], [value="False"]').show();
} else if (clickedNumber === 'Yes or No') {
    ans.filter('[value="Yes"], [value="No"]').show();
}
于 2012-10-21T10:46:23.470 回答