Jquery selectable：只允许一个类/类型的多选

Posted 2023-05-07

【中文标题】Jquery selectable：只允许一个类/类型的多选

【英文标题】：Jquery selectable: Allow multiselect just for one class/type

【发布时间】：2018-04-09 04:37:08

【问题描述】：

我有一张带有有序列表的表格。有序列表包含可选择的时间戳。一个表条目“td”是一天。 （我正在编写一个网络日历）。

<td class="day"><div class="scroll">

        <ol class="timelist">

            <li id="2017-10-27_14:41" class="ui-selectee">14:41</li>
            <li id="2017-10-27_15:28" class="ui-selectee">15:28</li>
            <li id="2017-10-27_16:00" class="ui-selectee">16:00</li>
            <li id="2017-10-27_08:00" class="ui-selectee">08:00</li>
            <li id="2017-10-27_09:00" class="ui-selectee">09:00</li>
            <li id="2017-10-27_12:01" class="ui-selectee">12:01</li>

        </ol>

</div>
</td>

这是我的 jquery 代码：

<script type= "application/javascript">

         $(document).ready(function()

         $( ".timelist" ).on( "mousedown", function ( e ) 
        e.metaKey = true;
         ).selectable();

        ); 

 </script>

现在，如果我已经选择了一个时间戳并单击另一个，它也会选择第二个。这正是我想要的，它就像一个魅力。

但另外我想选择日期。但是如果我已经选择了一个时间戳并点击了一天，我的程序将取消时间戳的选择并选择点击的日期。如果选择了一天，我点击了另一天，它会标记这一天 ALSO（选择了 2 天，依此类推）。但是如果我已经选择了一天或更多天，现在我点击时间戳，程序将取消选择天数。

我想说的是：“只需对具有相同类型/html 类的元素启用多选”。

我该怎么做？

【问题讨论】：

使用.on() 而不是.bind() 让您可以根据要求添加子选择器，您的问题是您将相同的功能绑定到所有这些可选元素而不是具有不同的他们的群体

好的，我在我的文件中更改了它。谢谢。但是你能给我举个例子吗？如何告诉我的程序进一步选择？

【参考方案1】：

使用“ui-widget-content”类而不是“ui-selectee”。

【讨论】：

我自己没用过。我的 HTML 文件自动添加了“ui-selectee”类。我猜是因为 selectable() 函数。你能具体一点，给我举个例子吗？

查看来自 Nick Craver 的 jsfiddle.net/nick_craver/ZfevM/7。