Question

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

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

您将看到“打开网格”链接，点击链接并选择“是或否”或“是或否”按钮。
选择其中一个按钮后，您会看到其答案按钮位于下方。
请点击“添加问题”按钮，这会在表格下方添加一个表格行。
现在在附加行中是问题所在。如果单击附加行中的“打开网格”链接并选择其中一个按钮，您将意识到下面的相应答案按钮消失。应该显示它们不会消失。

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

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

 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);


}

由于

Answer 1

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

据我所知：

$ cell是有条件定义的，但行$newBtn.appendTo($cell);是无条件的。如果不满足条件，append语句将无提示失败（无错误消息）。
即使在符合条件的情况下$newBtn已成功附加到$cell，$cell也会附加到$row，但$ row永远不会附加到任何内容。因此，DOM中不会出现任何newBtns。

编辑：

尝试更换：

    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();
    }

with：

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();
}

相应的答案按钮在附加行中消失

1 个答案: