私は、学生がリンクをクリックして簡単な div フォームを開いて、その特定の質問に対する回答を入力できるようにするデジタル教科書機能に取り組んでいます。ポップアップ フォームは、非表示、表示、およびドラッグ可能にするための jQuery UI を備えたシンプルな HTML/CSS です。これがひねりです。それぞれが一意の div に添付する必要がある複数の質問があります。問題ありません、と私は思いました。それぞれの a href を、DIV 内で割り当てた一意の ID にリンクするように設定します。問題は、対応するa hrefで適切なDIVをターゲットにできないようです。代わりに、どのリンクをクリックしても同じ一連の質問が表示されます。これは非常に単純に思えますが、おそらく複雑すぎます。ここで何ができますか？
HTML:
<div id="draggable" class="messagepop pop">
<form method="post" id="new_message" action="/answers">
<p><label for="body">What type of person is Carsten?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><label for="body">How do you know?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><center><input type="submit" value="Submit" name="commit" id="message_submit"/> or <a id="hide" href="#">Cancel</a></center></p>
</form>
</div>
<div id="draggable" class="messagepop pop">
<form method="post" id="new_message" action="/answers">
<p><label for="body">What can you learn about an active volcano from the photograph?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><center><input type="submit" value="Submit" name="commit" id="message_submit"/> or <a id="hide" href="#">Cancel</a></center></p>
</form>
</div>
<a href="#" id="show">Draw Conclusions</a> What kind of person is Carsten? How do you know?
<a href="#" id="show">Use Text Features</a> What can you learn about an active volcano from the photograph?
最初の a href で最初の div を開く必要があり、2 番目の a href で 2 番目の div を開く必要がある場合など。
CSS:
.messagepop {
overflow-y: auto;
overflow-x: hidden;
cursor:default;
display:none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align:left;
width:394px;
height: 335px;
z-index:50;
padding: 25px 25px 20px;
background-color: #fff;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 4px 4px 4px 4px;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-style: solid;
border-width: 1px;}
JS:
$(document).ready(function() {
$('.show').click(function() {
if ( !$(this).next('div').is(':visible') ) {
$(".messagepop").slideFadeToggle();
$(this).next('div').slideFadeToggle();
}
});
$('.hide').click(function() {
$(this).parent().slideFadeToggle();});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);};
$(function() {
$("#draggable").draggable();});