jQuery UI：如果元素必須具有 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可選演示

我試過將列表的 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>

Answer 2

運行代碼為：

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

您可以將#selectable替換為任何指向您想要選擇的內容的選擇器。 所以它不一定是身份證。 它可能是 class 之類的.selectable 。

Answer 3

使用 class 而不是元素。 一個元素的 class 可以包含多個值。

Answer 4

只需更改 te 行

¥('selectable').selectable();

到

¥('idChosed').selectable();

對於您選擇的每個元素