javascript - 命令正如我想要的那样

Question

我正在使用 jQuery UI 可排序元素。我的 jQuery 脚本在用户选中某些框时生成。但我也有一个选择允许用户定义他想要的布局。

当他单击选择器中的默认值时，我想定义<li>顺序，或者至少我希望它们在我的页面中首次显示时返回。

你有什么解决办法吗？（我使用 jQuery && jQuery UI）

这是我的代码：

$('#layout_choice').change(function(){
        window.layout_choice = $(this).val();

        //change li and ul id name
        $('#sortable > li').each(function(){
            let tmp_id = $(this).attr('id')
            tmp_id = tmp_id.replace(/([a-z]{3,8}\_\Bblock\B\_)[a-z]{4,7}/i, "$1" + window.layout_choice);
            $(this).attr('id', tmp_id);
        })
        //changing ul by replacing witg regex his class name
        let tmp_class_ul = $('#sortable').attr('class').split(' ')[2];
        $('#sortable').removeClass(tmp_class_ul)
        tmp_class_ul = tmp_class_ul.replace(/(\bsortable)(\_)?([a-z]{4,7})?/i, "$1" + "\_" + window.layout_choice);
        $('#sortable').addClass(tmp_class_ul);

        // disable sorting if user layout choice set on 'default'
        if(window.layout_choice == 'default')   $('#sortable').sortable('disable')
        else                                    $('#sortable').sortable('enable')

        if($(this).has('default')){
            // display them back with correct order.
        }
    })

 <!--        Choice display manager-->
            <div class="col">
                <span class="badge badge-default">Choose the position of your selected elements</span>

                <select class="mt-1" id="layout_choice" name="layout_format">
                    <option selected disabled>--SELECT A LAYOUT TYPE--</option>
                    <option value="default">Default (non customizable)</option>
                    <option value="mini">Mini format customizable</option>
                    <option value="full">Full customizable</option>
                    <option value="" disabled>Customizable by lines</option>
                </select>


                <ul id="sortable" class="sortable_ul">
                    <!-- <li> for each category of information we will display in the builder -->
                </ul>

                <input class="d-none" type="text" id="categories_order" name="order">

            </div>

知道如何在不删除每个并以正确顺序替换每个的情况下怎么做。谢谢 ！

标签： javascripthtmljqueryjquery-ui