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的全部意义在于它应该是唯一。

要定位多个元素，请使用类。思考课程的方式是他们＆＃34;分类＆＃34;元素的类型或行为。由于您尝试将每个列表分类为＆＃34;可选＆＃34;，您可以使用.selectable类。

<ol class="selectable">

的Javascript

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

多次使用Jquery可选ID

1 个答案: