javascript - 使用 jQuery UI Selectable 仅选择以下元素

Question

我有一个包含一些行和单元格的表格。使用 jQuery UI Selectable 我如何自定义选择，因此只能选择彼此跟随的单元格。如果不选择之间的单元格，就不可能跨行垂直选择单元格。

有什么解决办法吗？

Answer 1

使用selected回调将类添加到所选元素；您将用于 tie 的类.selectable()。然后你可以结合使用下一个兄弟选择器，你应该能够完成你需要的。

首先，您将需要以下内容：

<ol>
    <li class="ui-widget-content ui-selectee">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ol>

然后，当你选择一个会触发回调的时候，你想让第二个成为可选的。

<ol>
    <li class="ui-widget-content ui-selectee ui-selected">Item 1</li>
    <li class="ui-widget-content ui-selectee">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ol>

等等。