不知道如何最好地描述这一点,但我会尝试放在一些背景下。我对这两个 Javascript 都很陌生,在 PHP 方面仍然是初学者,所以请指出您看到的任何问题 - 总是愿意学习!
话虽如此,这就是我正在做的事情
- 我有一个基本的 php 页面,它使用 AJAX 在单击 div 时更新表(.todo 或 .completed)
- AJAX 返回一个已更新项目的数组,我使用它来提取 itemText 和 itemNo 并附加或预先添加一个包含其中信息的 div。
- 单击的项目是 .todo 会向上滑动,然后添加为 .completed,并且单击时的 .completed 会恢复为 .todo。
问题是,如果我单击一个 .todo 项目,它会使用 slideUp 删除,然后添加为 .completed,没有问题。但是,如果我随后单击新的 .completed 项目将其恢复为 .todo,则会附加一个 COPY 并保留原始项目。
我不太确定该怎么做,非常感谢任何帮助。
我的JS
$('#needToDo').on("click", ".todo", function() {
var itemNo = $(this).attr("id");
var updateQuery = "UPDATE items SET done=1 WHERE itemNo = " + itemNo;
$.ajax({
type: "POST",
url: "toDoProcess.php",
dataType: "json",
data: { query: updateQuery, itemNo: itemNo },
success: function(resultArray){
if(resultArray != ""){
var itemNo = resultArray[0]['itemNo'];
var itemText = resultArray[0]['itemText'];
$('#' + itemNo).slideUp(function(){
$('#completedItems').prepend('<div class=\'item completed\' id=\''+itemNo+'\'>'+itemText+'</div>');
});
} else {
console.log("Could not complete that at this time");
}
}
});
});
$('#completedItems').on("click", ".completed", function() {
var itemNo = $(this).attr("id");
console.log(itemNo);
var updateQuery = "UPDATE items SET done=0 WHERE itemNo = " + itemNo;
$.ajax({
type: "POST",
url: "toDoProcess.php",
dataType: "json",
data: { query: updateQuery, itemNo: itemNo },
success: function(resultArray){
if(resultArray != ""){
var itemNo = resultArray[0]['itemNo'];
var itemText = resultArray[0]['itemText'];
$('#' + itemNo).slideUp(function(){
$('#needToDo').append('<div class=\'item todo\' id=\''+itemNo+'\'><input type="checkbox">'+itemText+'</div>');
});
} else {
console.log("Could not complete that at this time");
}
}
});
});
我的 HTML
<div class="container">
<h1 class="sectionTitle">To Do App</h1>
<h2 class="sectionTitle">Need to complete</h2>
<div id="needToDo">
<?php
// connect to DB
try {
$db = new PDO("mysql:host=localhost;dbname=toDoApp;port=3306","root","root");
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (Exception $e) {
echo $e;
}
// Query for to-do items
// (where items are not marked as done & TO BE ADDED date = selected date)
// REMEMBER TO ADD WHERE DATE = TODAY etc.
try {
$query = $db->query("SELECT itemNo, itemText, needShouldWant FROM items WHERE done != 1 ORDER BY itemNo DESC");
} catch (Exception $e) {
echo $e;
}
// array returned by the query
// (assigned to result and told to use assoc keys)
$result = $query->fetchAll(PDO::FETCH_ASSOC);
// Each variable in the result array is assigned as item while looping through, each item returns html
foreach($result as $item){
$itemNo = $item['itemNo']; ?>
<div class="item todo" id="<?php echo $itemNo ?>"><input type="checkbox" id="checkbox<?php echo $itemNo ?>"><?php echo $item['itemText'];?></div>
<?}?>
</div>
<h2 class="sectionTitle">Completed Items</h2>
<div id="completedItems">
<?php
// Query for to-do items
// (where items are not marked as done & TO BE ADDED date = selected date)
// REMEMBER TO ADD WHERE DATE = TODAY etc.
try {
$query = $db->query("SELECT * FROM items WHERE done = 1 ORDER BY itemNo DESC");
} catch (Exception $e) {
echo $e;
}
// array returned by the query
// (assigned to result and told to use assoc keys)
$result = $query->fetchAll(PDO::FETCH_ASSOC);
// Each variable in the result array is assigned as item while looping through, each item returns html
foreach($result as $item){
$itemNo = $item['itemNo']; ?>
<div class="item completed" id="<?php echo $itemNo ?>"><?php echo $item['itemText'];?></div>
<?}?>
</div>
</div>
</div>