jQuery UI:如果元素必须有id =“selectable”,我怎么能有多个“selectable”元素?

时间:2012-04-05 21:18:35

标签: javascript jquery jquery-ui

我所有的演示都能找到这样的模式:

<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,如果是,那么如何选择多个列表?

4 个答案:

答案 0 :(得分:6)

不要求使用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>

答案 1 :(得分:3)

操作代码是:

$(function() {
    $( "#selectable" ).selectable();
});

您可以将#selectable替换为任何指向您想要选择的选择器。所以它不一定是一个ID。它可以是类似.selectable的类。

答案 2 :(得分:2)

使用类而不是元素。元素的类可以包含多个值。

答案 3 :(得分:-2)

只需更改te行

¥('selectable').selectable();

¥('idChosed').selectable();

对于您选择的每个元素