Question

我正在使用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>

我的问题是，当我点击星期六例如，它显示早晨，下午和晚上。但是，当我点击其他一天没有显示其他“列表”时，它显示相同的列表，具有相同的选定项目，我想要的是它显示为空而没有选择来检查新项目，当切换到其他日记得选择的元素

Answer 1

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

也就是说，更像是：

df[df['ids'].str.contains("ball")]

}）;

无法创建可选择的并记住内部检查的元素

1 个答案: