ここに、ユーザーがオプションと回答を選択できるアプリケーションがあります。質問を説明する最良の方法は、アプリケーション自体を使用して、何が起こっているかを確認できるかどうかです。申請書は以下の手順に従ってください。
- ステップ1：アプリケーションを開くと、[グリッドを開く]リンクが表示され、それをクリックしてオプションタイプを選択します。オプションを選択すると、下部に回答ボタンが表示されます。たとえば、選択したオプションが「5」の場合、5つの回答ボタン「A-E」が表示されます。選択したオプションが8の場合、8つの回答ボタン「AH」が表示されます。
これで問題ありません。しかし、私が抱えている問題は、ユーザーが以前のオプションを追加したい場合です。以下の手順をご覧ください。
- ステップ2：ページを更新する
- ステップ3：左側に緑色のプラスボタンが表示されます。それをクリックすると、モーダルウィンドウが開きます。
- ステップ4：検索ボックスに「AAA」と入力し、[送信]ボタンをクリックすると、データベースの行が表示されます。
- ステップ5：[追加]ボタンをクリックして行を選択してください。モーダルウィンドウが閉じます。右側の回答とオプションコントロールを見ると、[オプションタイプ]テキストボックスと[回答数]テキストボックスが表示されます。が表示されますが、「回答」ボタンは表示されません。
だから私の質問は、ユーザーが「追加」ボタンをクリックした後に「回答」ボタンを表示するにはどうすればよいですか？
以下は、「追加」ボタンがクリックされた後に何が起こるかを制御する機能です。
function addwindow(numberAnswer,gridValues) {
if(window.console) console.log();
if($(plusbutton_clicked).attr('id')=='mainPlusbutton') {
$('#mainNumberAnswerTxt').val(numberAnswer);
$('#mainGridTxt').val(gridValues);
} else {
$(plusbutton_clicked).closest('tr').find('input.numberAnswerTxtRow').val(numberAnswer);
$(plusbutton_clicked).closest('tr').find('input.gridTxtRow').val(gridValues);
}
$.modal.close();
return false;
}
以下は、回答ボタンが保存されているコードです（回答ボタンを表示できるようにするには、何を呼び出す必要がありますか）。
<table id="optionAndAnswer" class="optionAndAnswer">
...
<?php
$a = range("A","Z");
?>
<table id="answerSection">
<tr>
<?php
$i = 1;
foreach($a as $key => $val){
if($i%7 == 1) echo"<tr><td>";
echo"<input type=\"button\" onclick=\"btnclick(this);\" value=\"$val\" id=\"answer".$val."\" name=\"answer".$val."Name\" class=\"answerBtns answers answerBtnsOff\">";
if($i%7 == 0) echo"</td></tr>";
$i++;
}
?>
</tr>
<tr>
<td>
<input class="answerBtns answers" name="answerTrueName" id="answerTrue" type="button" value="True" onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerFalseName" id="answerFalse" type="button" value="False" onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerYesName" id="answerYes" type="button" value="Yes" onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerNoName" id="answerNo" type="button" value="No" onclick="btnclick(this);"/>
</td>
</tr>
</table>
...
</table>
アップデート：
以下は、グリッドからオプションが選択された後に回答ボタンをインポートするコードです。
$('.gridBtns').on('click', function()
{
appendAnswers(this);
});
function appendAnswers(t){
var clickedNumber = t.value;
$(t).closest('.option').siblings('.numberAnswer').find('.answertxt').show();
$(t).closest('.option').siblings('.numberAnswer').find('.string').hide();
$(t).closest('.option').siblings('.answer').find('.answers').each(function(index) {
if (!isNaN(clickedNumber) && index < clickedNumber) {
$(t).show();
$(t).closest('.option').siblings('.numberAnswer').find('.string').hide();
// show but don't change the value
$(t).closest('.option').siblings('.numberAnswer').find('.answertxt').show();
} else {
$(t).hide();
$(t).removeClass('answerBtnsOn');
$(t).addClass('answerBtnsOff');
}
var $this = $(t);
var context = $this.parents('.optionAndAnswer');
console.log($this);
});
prevButton = clickedNumber;
$(t).closest('.option').siblings('.noofanswers').find('.string').hide();
$(t).closest('.option').siblings('.noofanswers').find('.answertxt').show();
getButtons();
};
});
function getButtons()
{
var i;
if (initClick == 0) {
for (i = 65; i <= 90; i++) { // iterate over character codes for A to Z
$("#answer" + String.fromCharCode(i)).removeClass("answerBtnsOn").addClass("answerBtnsOff");
}
initClick = 1;
}
// code above makes sure all buttons start off with class answerBtnsOff, (so all button are white).
}