无法创建可选择并记住里面检查的元素答案

【问题标题】：Can't create a selectable and remember the elements checked inside无法创建可选择并记住里面检查的元素
【发布时间】：2018-04-17 21:44:34
【问题描述】：

我正在使用 Jquery UI，我正在尝试做一个显示从今天起 7 天后的可选择项。示例：

周五周六周日周一周二周三周四周五

每一项都是一项，您可以从中选择一项。所以我使用 .selectable()。我希望当我单击一个元素时，它会显示一个包含 3 个元素的新列表：早晨下午夜晚

在新列表中，您可以选择项目，它必须记住点击了哪些项目。

如果您在第一个可选择的日期列表中更改您选择的项目，您必须再次显示列表早上、下午和晚上，但要干净，您可以在任何您想要的地方再次选择。但事实上，如果我们回到前一天或另一天，我们必须记住选中的项目并显示它被选中。

这是我的代码，我知道这很糟糕，但我要开始了。

        dias.forEach((dia) => {
            switch (dia) {
                case 0: $("#selectable").append(`<li class="ui-widget-content">Domingo</li><ol id="select-result" hidden>
                    <li class="ui-widget-content"> Mañana</li>
                    <li class="ui-widget-content">Tarde</li>
                    <li class="ui-widget-content">Noche</li>
                  </ol > `);
                    break;
                case 1: $("#selectable").append(`<li class="ui-widget-content">Lunes</li><ol id="select-result" hidden>
                    <li class="ui-widget-content"> Mañana</li>
                    <li class="ui-widget-content">Tarde</li>
                    <li class="ui-widget-content">Noche</li>
                  </ol > `);
                    break;
                case 2: $("#selectable").append(`<li class="ui-widget-content">Martes</li><ol id="select-result" hidden>
                    <li class="ui-widget-content"> Mañana</li>
                    <li class="ui-widget-content">Tarde</li>
                    <li class="ui-widget-content">Noche</li>
                  </ol > `);
                    break;
                case 3: $("#selectable").append(`<li class="ui-widget-content">Miercoles</li><ol id="select-result" hidden>
                    <li class="ui-widget-content"> Mañana</li>
                    <li class="ui-widget-content">Tarde</li>
                    <li class="ui-widget-content">Noche</li>
                  </ol > `);
                    break;
                case 4: $("#selectable").append(`<li class="ui-widget-content">Jueves</li><ol id="select-result" hidden>
                    <li class="ui-widget-content"> Mañana</li>
                    <li class="ui-widget-content">Tarde</li>
                    <li class="ui-widget-content">Noche</li>
                  </ol > `);
                    break;
                case 5: $("#selectable").append(`<li class="ui-widget-content">Viernes</li><ol id="select-result" hidden>
                    <li class="ui-widget-content"> Mañana</li>
                    <li class="ui-widget-content">Tarde</li>
                    <li class="ui-widget-content">Noche</li>
                  </ol > `);
                    break;
                case 6: $("#selectable").append(`<li class="ui-widget-content">Sabado</li><ol id="select-result" hidden>
                    <li class="ui-widget-content"> Mañana</li>
                    <li class="ui-widget-content">Tarde</li>
                    <li class="ui-widget-content">Noche</li>
                  </ol > `);
                    break;
            }
        });
    });

    $(function () {

        $("#selectable").selectable({
            selected: function (event, ui) {
                $("#select-result").show();
                $(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected");
            }

        });
        $("#select-result").selectable({
            selected: function (event, ui) {

                if ($(ui.selected).hasClass("selected")) {
                    $(ui.selected).removeClass("selected");
                }
                else $(ui.selected).addClass("selected");

            }
        });
    });


</script>
</head>

<body>


<ol id="selectable">
</ol>

</body>

</html>

我的问题是，例如，当我单击星期六时，它会显示上午、下午和晚上。但是当我点击前一天不显示另一个“列表”时，它显示相同的列表和相同的选定项目，我想要的是它显示为空，没有选择检查新项目，当切换到其他天时记住选择的元素

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

只是一个想法：当我更改 HTML 内容时，我必须更新/重做绑定到选择器的函数，因为 HTML 已更改。正确的？也许如果您在 switch 语句之后将其更改为进行绑定（适当插入 .unind() ），那将为您更改它。

也就是说，让它更像：

dias.forEach((dia) => {
    switch (dia) {
        ...
        ...
    }
});

$("#selectable").unbind().selectable({
    selected: function (event, ui) {
        $("#select-result").show();
        $(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected");
    }
});
    $("#select-result").unbind().selectable({
    selected: function (event, ui) {
        if ($(ui.selected).hasClass("selected")) {
            $(ui.selected).removeClass("selected");
        }
        else $(ui.selected).addClass("selected");
    }
});

});

【讨论】：