多次使用 Jquery 可选 ID [重复]答案

【问题标题】：Using Jquery Selectable IDs multiple times [duplicate]多次使用 Jquery 可选 ID [重复]
【发布时间】：2018-03-31 16:51:40
【问题描述】：

我对 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。

我google了很多，找不到解决办法。

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

【问题讨论】：

您是否尝试过将 id 更改为 class 并像这样使用它：$( ".selectable" ).selectable();
ID 需要唯一。您应该从不在同一页面上有多个具有相同 ID 的元素。如果您需要多个元素，请使用class。
@palaѕн 谢谢。现在可以了。是的，我试过了，但我有一个错字。

标签： javascript jquery html list jquery-ui-selectable

【解决方案1】：

您应该不在整个网站上多次使用 ID。 ID 的全部意义在于它应该是唯一的。

要定位多个元素，请使用类。考虑类的方法是它们“分类”元素的类型或行为。由于您试图将每个列表分类为“可选”，因此您可以使用 .selectable 类。

<ol class="selectable">

Javascript

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

【讨论】：

感谢您的回答。现在它起作用了。我想到了课程并尝试了它，但它没有用。也许我在某个地方有错字。我想知道为什么它不起作用。
@Kazuya91 很可能你不小心在 html <ol class=".selectable"> 中的类名前加了一个点。我们都至少犯过一次这个错误。