Yes, I know there's a lot of good answers for this question, however, I can't seem to make/adapt the code to work in my situation. This is a big project I'm working on, to make digital worksheets. I'm trying to make certain panels visible depending on the value of a tag, however all the code I've tried I can't adapt to work with my case as the question template (where it gets submitted is based on the ?q= number) is in a iframe to save time and file size. Would it be possible to do a button to update the visible panels, or do AJAX for it whilst being in a iframe? I don't have any experience in AJAX or jQuery, and yes I've tried to lean them but they in my opinion is too complicated.
是的,我知道这个问题有很多好的答案,但是,我似乎无法使代码适应我的情况。这是我正在制作的一个大项目,用于制作数字工作表。我试图根据标签的值使某些面板可见,但是我尝试的所有代码都无法适应我的案例作为问题模板(提交的地方是基于?q = number)在iframe中以节省时间和文件大小。是否可以使用按钮来更新可见面板,或者在iframe中为它做AJAX?我没有任何AJAX或jQuery的经验,是的,我试图精益求精,但我认为它们太复杂了。
I found this answer, but it doesn't work for some reason.
我找到了这个答案,但由于某些原因它不起作用。
Tip: If your giving me completed code (thank you!) just know that Text, Paragraph, and Mathematical all lead to div type-1
提示:如果你给我完整的代码(谢谢!)只知道Text,Paragraph和Mathematical都会导致div类型-1
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../assets/f.css">
<script src="../assets/fjquery.js"></script>
<script src="../assets/f.js"></script>
<script src="../assets/fm.js"></script>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<label>Question
<input type="text" placeholder="e.i Who was the discoverer of evolution?" name="q-name" required>
</label>
<div class="large-12 columns">
<label>Question Type
<span style="color: #bbb;"> <i>Click 'Update Field' after selection.</i></span>
<select id="qtype" name="qtype">
<option value="2">Multiple Choice</option>
<option value="3">Radio choice</option>
<option value="1">Text</option>
<option value="1">Paragraph</option>
<option value="4">Selection Dropdown</option>
<option value="1">Mathmatical</option>
</select>
</label>
<a onClick="updateQTp()">Update Field</a> |
<a onClick="hide()">Hide All Fields</a>
<p id="tester"></p>
</div>
<div class="large-12 columns">
<!--TEXT, PARAGRAPH, MATH--><div id="type-1">
<div class="panel">
<label>Answer Type (Text, Paragraph, Mathmatical)</label>
<input id="radio1" type="radio" name="tpm" value="simple" checked><label for="radio1">Has Simple Answer</label>
<input id="radio2" type="radio" name="tpm" value="complex"><label for="radio2">Has Complex Answer</label>
<input id="radio3" type="radio" name="tpm" value="human"><label for="radio3">Needs manual correction</label>
<hr style="padding: 4; margin: 0;" />
<label>Correct Answer (Simple Answer Only)
<input type="text" placeholder="e.i Charles Darwin" name="abox">
</label>
</div>
</div><!--MULTI CHOICE--><div id="type-2">
<div class="panel">
<label>Answer Type (Multiple Choice)</label>
<ol style="list-style-type: square;">
<li><label><input id="mc-tbox" type="checkbox" name="mc-1"> Correct</label><input id="mc-tbox" type="text" placeholder="A" name="mc-l1" ></li>
<li><label><input id="mc-tbox" type="checkbox" name="mc-2"> Correct </label><input id="mc-tbox" type="text" placeholder="B" name="mc-l2" ></li>
<li><label><input id="mc-tbox" type="checkbox" name="mc-3"> Correct </label><input id="mc-tbox" type="text" placeholder="C" name="mc-l3" ></li>
<li><label><input id="mc-tbox" type="checkbox" name="mc-4"> Correct </label><input id="mc-tbox" type="text" placeholder="D" name="mc-l4" ></li>
</ol>
</div>
</div><!--RADIO CHOICE--><div id="type-3">
<div class="panel">
<label>Answer Type (Radio Choice)</label>
<ol style="list-style-type: circle;">
<li><input id="rc-tbox" type="text" placeholder="A" name="rc-l1" > </li>
<li><input id="rc-tbox" type="text" placeholder="B" name="rc-l2" ></li>
<li><input id="rc-tbox" type="text" placeholder="C" name="rc-l3" ></li>
<li><input id="rc-tbox" type="text" placeholder="D" name="rc-l4" ></li>
</ol>
<select name="rd-crt">
<label>Correct letter
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
<option value="">D</option>
</label>
</select>
</div>
</div><!--DROPDOWN--><div id="type-4">
<div class="panel">
<label>Answer Type (Dropdown)</label>
<ol style="list-style-type: circle;">
<li><input id="rc-tbox" type="text" placeholder="A" name="rc-l1" ></li>
<li><input id="rc-tbox" type="text" placeholder="B" name="rc-l2" ></li>
<li><input id="rc-tbox" type="text" placeholder="C" name="rc-l3" ></li>
<li><input id="rc-tbox" type="text" placeholder="D" name="rc-l4" ></li>
</ol>
<select name="sd-crt">
<label>Correct letter
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
<option value="">D</option>
</label>
</select>
</div>
</div>
</div>
<div class="large-10 columns">
<label>Help Text
<input type="text" placeholder="e.i Enter a name" name="qhelp">
</label>
</div>
<div class="small-5 columns">
<label>
<input id="useht" type="checkbox" name="useht" value="use" required checked>
Use Help Text</label>
<label>
<input type="checkbox" id="showwork" name="showwork"> 'Show Work' Textarea
</label>
</div>
<div class="large-12 columns">
<label>Public Comments<textarea cols="20" rows="2" name="pcomm"></textarea></label>
<label>Private Comments<textarea cols="20" rows="2" name="pcommprv"></textarea></label>
</div>
<script>
document.getElementById("type-1").hide();
document.getElementById("type-2").hide();
document.getElementById("type-3").hide();
document.getElementById("type-4").hide();
$('#qtype').change(function() {
$('.my-div-class:visible').hide();
$('#type-' + $('#qtype').val()).show();
});
</script>
</html>
1 个解决方案
#1
0
Do you have to send information to a server before the changes take place? Because if not you can do this using JQuery. (field = question field, new_field = field to fade in, and answer = correct answer)
在更改发生之前,您是否必须将信息发送到服务器?因为如果没有,你可以使用JQuery来做到这一点。 (field =问题字段,new_field =要淡入的字段,并且答案=正确答案)
$(document).on('change', "#qtype", function() {
if ($("#qtype").val() == "1") {
$("#type-1").fadeIn("slow");
}
else if ($("#qtype").val() == "2"){
$("type-2").fadeIn("slow");
}
else if ($("#qtype").val() == "3") {
$("type-3").fadeIn("slow");
}
else {
$("type-4").fadeIn("slow");
}
});
That should work if I understand your question and concerns correctly. There might be minor problems with brackets in there.
如果我理解你的问题和关注,那应该有用。那里的括号可能存在小问题。
#1
0
Do you have to send information to a server before the changes take place? Because if not you can do this using JQuery. (field = question field, new_field = field to fade in, and answer = correct answer)
在更改发生之前,您是否必须将信息发送到服务器?因为如果没有,你可以使用JQuery来做到这一点。 (field =问题字段,new_field =要淡入的字段,并且答案=正确答案)
$(document).on('change', "#qtype", function() {
if ($("#qtype").val() == "1") {
$("#type-1").fadeIn("slow");
}
else if ($("#qtype").val() == "2"){
$("type-2").fadeIn("slow");
}
else if ($("#qtype").val() == "3") {
$("type-3").fadeIn("slow");
}
else {
$("type-4").fadeIn("slow");
}
});
That should work if I understand your question and concerns correctly. There might be minor problems with brackets in there.
如果我理解你的问题和关注,那应该有用。那里的括号可能存在小问题。