Question

我是JQuery的初学者，我想做一个简单的匹配测验所以我用这段代码来创建qustions div并回答div

编辑：

<HTML>  

    <HEAD>  
        <script type="text/javascript" 

            src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  

        <script type="text/javascript" 

            src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>  




     </HEAD>  

     <BODY onload="location.href='#bottom'">  
    <form id="f1" action="#" method="post" > 
       <div id="Qdiv" style="position: absolute; top:242px; left:0px; wedth:120px"> 
         <div  id="q1" class="question"><label id="q1l"> The Capital of KSA</label></div> 
         <div  id="q2" class="question"><label id="q2l"> The Capital of UK</label></div> 
         <div  id="q3" class="question"><label id="q3l"> The Capital of USA</label></div> 
       </div> 
       <div id="answerDiv" style="position: absolute; top:242px; left:140px; wedth:100px"> 
         <div  id="a1" class="drag answer"><label id="a1l"> Riyadh</label></div> 
         <div  id="a2" class="drag answer"><label id="a2l"> London</label></div> 
         <div  id="a3" class="drag answer"><label id="a3l"> Washington</label></div> 
      </div> 
      <input type= "submit" id="sub1" value="Submit" style="position: absolute; top:310px; left:70px; /><br /> 
    </form> 
<img src="images/correct.png"id="myImage"style="display: none;"/>
<img src="images/false.png"id="myImage1"style="display: none;"/>
    <a name="bottom"style="position: absolute; top:300px; left:70px;" ></a>
    <script> 
    $(function() { 
            $("#a1").draggable(); 
            $("#q1").droppable({
            accept: '#a1',   //I used this to make only a1 acceptable for q1
    drop: function(event, ui) {
    $(this).addClass('ui-state-highlight').find('label').html('Dropped!'); // this is just for testing if accept works 
                }
            }); 

        }); 
    $(function() { 
            $("#a2").draggable(); 
            $("#q2").droppable({ 
            accept: '#a2',    //I used this to make only a2 acceptable for q2
    drop: function(event, ui) {
        $(this).addClass('ui-state-highlight').find('label').html('Dropped!'); // this is just for testing if accept works 

                }
            }); 

        }); 
    $(function() { 
            $("#a3").draggable(); 
            $("#q3").droppable({ 
            accept: '#a3',   //I used this to make only a3 acceptable for q3
    drop: function(event, ui) {
        $(this).addClass('ui-state-highlight').find('label').html('Dropped!'); // this is just for testing if accept works
                }
            }); 

        }); 

       $(function() { 
          $('f1').submit(function() { 
              $('.question').each(function() { 
                   var $question = $(this); 
                   var $answer = $(this).find('.answer'); 
                   if ( $answers.length < 1 ) { 
                       alert(' you must provide all answers'); 
                       return false; 
                   } 
                   var answerId = $answer.attr('id'); 
                   var $answerForm = $(this).append('<input type="hidden" value="' + answerId + '" name="answer_' + $(this).attr('id') + '" />'); 
              }); 

          }); 
       }); 
    </script>
    </body>
    </html>

我想让用户将利雅得，伦敦和华盛顿拖到任何地方 KSA的首都英国首都美国首都并提交他/她的答案在提交之后，我希望按钮处理程序检查每个draggable是否高于其正确的droppable。如果是，则出现correct.png。 othewise false.png出现。

我真的非常感谢丹·希伯登先生的帮助，但是我尝试了你的代码并没有表现出我所期望的警报（“你必须提供所有答案”）;我找不到原因。

我尝试使用其他代码，但他们也失败了，抱歉很烦人，但我真的需要你的帮助所以我发布了整个页面：$

您的帮助将不胜感激：）

Answer 1

当您进行拖放时，您正在修改dom。因此，您可以检查正确的“回答”可拖动是否在正确的“问题”中。

您的第一组代码未显示您的div结构，但请考虑以下内容：

<div id="q1"> The Capital of KSA  </div>
<div id="q2"> The Capital of UK   </div>
<div id="q3"> The Capital of USA  </div>

<div id="a1"> Riyadh  </div> 
<div id="a2"> London  </div>
<div id="a3"> Washington  </div>

您现在可以检查question1是否包含answer1

if( $('#q1').find('#a1').length > 0 ) {
   alert('question 1 is right!');
}

我使用.find使代码更容易阅读，但我认为你明白这个想法，是吗？

编辑：现在我看到你正在做什么 - 你希望提交保存这些数据。在将表单提交到表单元素之前，您需要注意，例如：

<form id="f1" action="page2.php" method="post" >
   <div id="Qdiv" style="position: absolute; top:242px; left:0px; wedth:120px">
     <div  id="q1" class="question"><label id="q1l"> The Capital of KSA</label></div>
     <div  id="q2" class="question"><label id="q2l"> The Capital of UK</label></div>
     <div  id="q3" class="question"><label id="q3l"> The Capital of USA</label></div>
   </div>
   <div id="answerDiv" style="position: absolute; top:242px; left:140px; wedth:100px">
     <div  id="a1" class="drag answer"><label id="a1l"> Riyadh</label></div>
     <div  id="a2" class="drag answer"><label id="a2l"> London</label></div>
     <div  id="a3" class="drag answer"><label id="a3l"> Washington</label></div>
  </div>
  <input type= "submit" id="sub1" value="Submit" style="position: absolute; top:310px; left:70px; /><br />
</form>
<script>
   $(function() {
      $('f1').submit(function() {
          $('.question').each(function() {
               var $question = $(this);
               var $answer = $(this).find('.answer');
               if ( $answers.length < 1 ) {
                   alert(' you must provide all answers');
                   return false;
               }
               var answerId = $answer.attr('id');
               var $answerForm = $(this).append('<input type="hidden" value="' + answerId + '" name="answer_' + $(this).attr('id') + '" />');
          });
      });
   });
</script>

希望在浏览器中输入它不会太粗糙。但原则是你要在提交表格后用答案制作隐藏的表格元素。该函数遍历每个问题并获取答案的id - 你最终会得到一个表单元素，其名称类似于answer_q1，值为a1 - （或a2，如果用户错误，是吗？）。

顺便说一句，您的提交按钮位于表单结束标记之后 - 它需要在它之前。

具体的可拖动性高于特定的可放置

1 个答案: