多次使用 Jquery 个可选择的 ID

Question

我是 jquery 的新手，我正在尝试制作两个列表，其中每个项目都是可选的。

这是我的代码：

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-1</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
      li{
         display: inline-block;
         padding: 20px;
         border: solid black;
         cursor: pointer;
      }

      .ui-selected{
         background-color: green;
         color: white;
      }
      </style>
      <script>
         $(function() {
            $("#selectable").selectable();
         });
      </script>
   </head>

   <body>
      <ol id = "selectable">
         <li>Product 1</li>
         <li>Product 2</li>
         <li>Product 3</li>
         <li>Product 4</li>
         <li>Product 5</li>
         <li>Product 6</li>
         <li>Product 7</li>
      </ol> 

      <ol id = "selectable">
         <li>Product 1</li>
         <li>Product 2</li>
         <li>Product 3</li>
         <li>Product 4</li>
         <li>Product 5</li>
         <li>Product 6</li>
         <li>Product 7</li>
      </ol> 
   </body>
</html>

一个列表的 ID 似乎不能使用两次，因为第一个列表中的项目是可选的，而第二个列表中的项目是不可选择的。

假设我有更多列表。必须有一种比编写

更有效的方法来使所有列表中的所有项目都可选择

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

对于我拥有的每个列表 ID。

我在谷歌上搜索了很多，但找不到解决方案。

对于这个例子，我只使用了两个列表，所以它没有超载，但我需要在动态创建的 HTML 模板中使用大量列表，并且我需要使每个列表中的所有项目都可选择。

Answer 1

您不应在整个站点中多次使用一个 ID。 ID 的全部意义在于它应该是 unique.

要定位多个元素，请使用 classes。考虑 classes 的方法是它们 "classify" 元素的类型或行为。由于您正在尝试 class 将每个列表确认为 "selectable"，因此您可以使用 .selectable class.

<ol class="selectable">

Javascript

$('.selectable').selectable();

多次使用 Jquery 个可选择的 ID

Using Jquery Selectable IDs multiple times

html

javascript

jquery

list

jquery-ui-selectable