1

これをどのように説明するのが最適かはわかりませんが、いくつかの文脈で説明してみます。私は Javascript と PHP に関してはまだ初心者なので、問題があれば指摘してください。

そうは言っても、これが私がやっていることです

  • AJAX を使用して div (.todo または .completed) のクリックでテーブルを更新する基本的な php ページがあります。
  • 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>
4

1 に答える 1

1

問題は、同じ ID を持つ複数の要素を作成していることです。解決策として、要素が非表示になったら削除してみてくださいslideUp

$('#' + itemNo).slideUp(function () {
    $(this).remove()
    $('#completedItems').prepend('<div class=\'item completed\' id=\'' + itemNo + '\'>' + itemText + '</div>');
});

.....

$('#' + itemNo).slideUp(function () {
    $(this).remove()
    $('#needToDo').append('<div class=\'item todo\' id=\'' + itemNo + '\'><input type="checkbox">' + itemText + '</div>');
});
于 2013-11-09T17:07:00.780 に答える