Question

我有一个可排序的元素网格，在用户移动元素后将其值更新为DB。问题是，我不知道如何在不重新加载页面的情况下将所有先前元素的id更新为新元素。

在PHP中，我会做这样的事情（来自我的一个旧页面的常见问题解答的代码），但是我不能使用PHP（它必须在没有任何页面重新加载的情况下发生，就在用户将元素移动之后）：

if ($old_order > $order){
    $result = dbquery("UPDATE faq SET orders=orders+1 WHERE orders>='$order' AND orders<='$old_order'");
}else{
    $result = dbquery("UPDATE faq SET orders=orders-1 WHERE orders>='$old_order' AND orders<='$order'");
}

我想用jQuery做，基本上我有7个id为0到6的元素，每次用户改变位置时，我将它序列化并用ajax发送给保存它的php代码。

现在做什么：

将elemtent 1移至第4位。
保存并运作。
将元素3移动到位置2
将元素1从位置4移回其旧元素，作为其ID 仍然是1而不是4。

我想做什么：

将元素1移动到位置4
将元素1的ID从1更改为4
将元素2,3和4的ID更改为-1到id 1,2和3

我希望有人理解我并能帮助我。

jQuery代码我可以使用：

$(".content-page").sortable({
    start: function(e,ui){
        ui.placeholder.height($(".sorted-icons").outerHeight(true));
        ui.placeholder.width($(".sorted-icons").outerWidth(true));
    },
    placeholder: 'placeholder',
    items: '.sorted-icons:not(.new_icon)',
    update: function(e,ui) {
        var order = $(this).sortable("serialize") + '&order=icons' + '&content_id=' + $(this).attr("data-shortcut-id");
        console.log(order);
        $.post("page_ajax.php", order).done(function(data){
            console.log(data);
        }).fail(function(data){
            console.log(data);
        });
    }
}).disableSelection();

Html代码基本上看起来像这个div里面的内容是相关的：

echo "<div class='sorted-icons' id='icon_$id'>";

如果您有任何问题，请发表评论，然后尝试回答并更新问题。

修正了jQuery：

var i = 0;
$(this).children('.sorted-icons').each(function(){
    $(this).attr('id', 'icon_' + i);
    i++;
});

还有PHP部分的问题。它以奇怪的顺序拯救它们。

Answer 1

好的，所以我的PHP代码中有一个小错误，但我设法用非常简单的代码来修复jQuery：

$(".content-page").sortable({
    start: function(e,ui){
        ui.placeholder.height($(".sorted-icons").outerHeight(true));
        ui.placeholder.width($(".sorted-icons").outerWidth(true));
    },
    placeholder: 'placeholder',
    items: '.sorted-icons:not(.new_icon)',
    update: function(e,ui) {
        var order = $(this).sortable("serialize") + '&order=icons' + '&content_id=' + $(this).attr("data-shortcut-id");
        console.log(order);
        $.post("page_ajax.php", order);
        // THIS PART //
        var i = 0;
        $(this).children('.sorted-icons').each(function(){
            $(this).attr('id', 'icon_' + i);
            i++;
        });
        // THIS PART //
    }
}).disableSelection();

希望可以帮助别人。

jQuery更改ID为＆lt;的所有DIV的ID比$（this）.attr（“id”）;

1 个答案: