javascript - jQuery 用户界面 : How can I have more than one "selectable" element if the element has to have id ="selectable"?

Question

我能找到的所有演示都遵循这种模式:

<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
    ..
</ol>

jQuery UI selectable demo

我试过将列表的 ID 更改为唯一的 ID，但它似乎不起作用。是否要求可选元素的 ID 为“可选”？如果是，如何使多个列表可选？

Answer 1

不需要使用 id。事实上，您也不需要使用 html 列表。

以下示例使用 <div>作为容器和<span>元素作为可选项目。

<div class="group">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>

<script>
  $(".group").selectable({ filter: 'span' });
</script>

下一个示例使用数据属性选择器 [data-album]针对多个容器。这些中的每一个<p>元素将被转换成一个单独的可选择的子元素 <img>元素作为选择者。

<p data-album="Vacation">
  <img src="..." />
  <img src="..." />
  <img src="..." />
</p>


<p data-album="Birthdays">
  <img src="..." />
  <img src="..." />
  <img src="..." />
</p>

<script>
  $("[data-album]").selectable({ filter: 'img' });
</script>