Question

我有一个你可以在下面使用的应用程序，但基本上它是一个文本输入，在用户从一行添加信息后没有改变。

以下是申请表：

Application

请按照以下步骤操作：

1：当你打开应用程序时，你会看到一个“添加问题”按钮，点击这个按钮，你会看到一个表格行附加在下面。

2：在附加的行中，单击“B”和“C”按钮，这些按钮将变为绿色，表示它们位于下方，您将看到2个文本输入，显示您已打开的按钮的值

3：你会在行的左侧看到一个绿色加号按钮。请单击此按钮，您将看到一个模态窗口。

4：您将在模态窗口中看到一个搜索栏，在搜索栏中输入“dog”，然后单击搜索按钮。

5：将出现与您的搜索相关的行，请点击右侧的“添加”按钮添加信息。

6：您将在附加行中看到现在按钮“A”突出显示，其他按钮关闭。

但问题是下面的文本输入没有改变。 IT仍然显示值“B”和“C”的文本输入，这是不正确的，因为按钮“A”打开并且是唯一打开的按钮，它应该仅显示为按钮“A”的文本输入，另一个应删除文本输入。

所以我的问题是，在用户从模态窗口添加信息之后，如何更改文本输入以仅显示已打开的按钮的值？

以下是更新答案按钮的代码：

    updateAnswer(context , iQuestionIndex, bDisableAppend);

    var container = $btn.closest(".optionAndAnswer");
    $(".answertxt", container).val( $(".answerBtnsOn", container).length );

    return false;
}


function updateAnswer(context, iQuestionIndex, bDisableAppend) {
    var _sCurrQ_Class = 'q_' + iQuestionIndex;
    var _oCurrAnswerContainer = jQuery('#answer_selections .' + _sCurrQ_Class);
    if (!_oCurrAnswerContainer.length) {
        _oCurrAnswerContainer = jQuery(document.createElement('div')).addClass(_sCurrQ_Class);
        !bDisableAppend && jQuery('#answer_selections').append(_oCurrAnswerContainer);
    }

    _oCurrAnswerContainer.html('');

    var value, id;
    // loop through all buttons with 'on' status and their info to the current answer container
    $('.answerBtnsOn', context).each(function(i, btn) {

        var $btn = $(btn);
        value = btn.value;
        id = $btn.attr('id');

        var n = $("input[name='" + id + "value']").length;
        var hid = "hidden" + id + n + "value";    
        $(btn).attr("data-hid", hid);


        if (!bDisableAppend) {
            // append those values to the form
            var input = '<input type="text" id="' + hid + '" value="' + value + '" name="' + id + 'value" />';
            _oCurrAnswerContainer.append(input);
        }
    });        
}

下面是控制模态窗口及其中所有内容的代码：

function addwindow（btn）{

    var answers = $.map(btn.split(''),function(chr){   return "#answer"+chr;  }).join(', 
    var answersrow = $.map(btn.split(''),function(chr){   return "#answer"+chr+"Row";  }).join(', ');
}



    if($(plusbutton_clicked).attr('id')=='mainPlusbutton') { //green plus button at top of application


        $('#answerSection').find('.answerBtnsOn').removeClass('answerBtnsOn').addClass('answerBtnsOff');
        $(answers).addClass("answerBtnsOn").siblings().addClass('answerBtnsOff');

        } else { 
//green plus button within an appended row
            $(plusbutton_clicked).closest('tr').find('.answerBtnsOn').removeClass('answerBtnsOn').addClass('answerBtnsOff');
            $(plusbutton_clicked).closest('tr').find(answersrow).addClass("answerBtnsOn").siblings().addClass('answerBtnsOff');

            }

    $.modal.close(); 
    return false;
}

Answer 1

正如我在评论中提到的，使用updateAnswer更新文本输入。

您需要发送包含该答案的所有按钮的节点。在addwindow我认为它应该是$(plusbutton_clicked).closest('tr')。你还需要以某种方式发送问题索引。

如果您将一些data attributes附加到某些元素上以简化检索各种值而不是为每个值创建类，则可能会更容易。

添加信息后，文本输入不会更改

1 个答案: