0

以下に使用できるアプリケーションがありますが、基本的には、ユーザーが行から情報を追加した後も変更されないテキスト入力です。

アプリケーションは次のとおりです。

応用

以下の手順に従ってください。

1：アプリケーションを開くと、[質問の追加]ボタンが表示されます。このボタンをクリックすると、その下に表の行が追加されます。

2：追加された行内で、ボタン「B」と「C」をクリックすると、これらのボタンが緑色に変わり、オンになっていることを意味します。その下に、オンにしたボタンの値を示す2つのテキスト入力が表示されます。

3：行の左側に緑色のプラスボタンが表示されます。このボタンをクリックすると、モーダルウィンドウが表示されます。

4：モーダルウィンドウに検索バーが表示されます。検索バーに「dog」と入力して、検索ボタンをクリックします。

5：検索に関連する行が表示されます。右側の[追加]ボタンをクリックして情報を追加してください。

6：添付の行で、ボタン「A」が強調表示され、他のボタンがオフになっていることがわかります。

しかし、問題は、下のテキスト入力が変更されていないことです。ボタン「A」がオンになっていて、オンになっている唯一のボタンであるため、ITは値「B」と「C」のテキスト入力を引き続き表示します。ボタン「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);
        }
    });        
}

以下は、モーダルウィンドウとその中のすべてを制御するコードです。

関数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;
}
4

1 に答える 1

0

コメントで述べたように、を使用updateAnswerしてテキスト入力を更新します。

その回答のすべてのボタンを含むノードを送信する必要があります。addwindow私はそれがすべきだと思います$(plusbutton_clicked).closest('tr')。また、どういうわけか質問インデックスを送信する必要があります。

いくつかの要素にいくつかのデータ属性を付加して、それぞれのクラスを作成するのではなく、さまざまな値の取得を簡素化すると、おそらく簡単になります。

于 2012-10-08T12:09:40.433 に答える