0
這裏我使用的是jQuery中的拖放操作。刷新時值不應該爲空,它應該將值存儲在數據庫中
我從數據庫中獲得一組問題和答案(文章 - >問題,文章 - >答案),其中答案在問題文本框中拖放。在刷新頁面時,拖動的值會出現在原來不在該特定文本框中的位置。
這是我的編碼。
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!--<link rel="stylesheet" href="/resources/demos/style.css" /> -->
<style>
/*#draggable { width: 50px; height: 20px; padding: 0.5em; } */
.drag_ans {
background: none repeat scroll 0 0 transparent;
border: 0 none;
width: 100px;
}
#draggable {
width: 50px;
height: 20px;
background: white;
}
#droppable {
float: left;
margin: 50px;
width: 500px;
height: 300px;
border: green;
}
#ques {
background: none repeat scroll 0 0 #FFFFFF;
padding: 10px;
width: 100px;
}
</style>
<script>
$(document).ready(function(){
$("#answer").click(function(){
// alert('find a score');
});
});
</script>
</head>
<body>
<div class="container_inner">
<?php
foreach($data as $article)
{
echo "<p>";
echo "<b>";echo $article->article_name;
echo"</b>";
echo "</p>";
echo "<p>";
echo $article->description;
echo "</p>";
echo $article->video; echo "<br>";
}
?>
<?php
$add=1;
foreach($question as $article)
{
?>
<!-- <div id="drop"> -->
<p>
<?php echo $article->question; ?>
<input type ="text" id="ques_<?php echo $add; ?>" name="" class="ui-widget-content" />
</p>
<!--</div> -->
<?php
$add++;
}
?>
<?php
$counter=1;
foreach($question as $article)
{
?>
<script>
$(function() {
$("#draggable_<?php echo $counter; ?>").draggable({ revert: 'invalid' });
$("#ques_<?php echo $counter; ?>").droppable({
drop: function(event, ui) {
$(this).addClass("ui-state-highlight").find("p").html("Dropped!");
}
});
});
</script>
<div id="draggable_<?php echo $counter; ?>" class="ui-widget-content drag_ans">
<p>
<?php echo $article->answer; ?>
</div>
</p>
<?php
$counter++;
}
?>
<p> <input class="green_but" type="submit" name="NEW_SUBMIT" value="Submit" id="answer"/> </p>
</div>
</body>
</html>
拖放工作正常,刷新頁面值在問題文本框中全部爲空。 如何驗證jQuery中的問題和答案,因爲這個答案應該在刪除問題文本框後存儲在數據庫中。當點擊提交按鈕時,如果回答錯誤,分數應該降低。 EX:如果用戶答案設置正確答案4滿分10分,那麼得分應該是4分。
顯示接收提交表單的代碼,而不是在您的for循環中創建多個腳本,您可以使用像'$(「div [id^='draggable _']」),'draggable'和' $(「div [id^='ques _']」)。droppable',並不是說這樣可以解決你的問題,但是更容易調試一個腳本而不是很多腳本。 –