使用jQuery可選的ID多次

-3

我完全新的jQuery和我試圖讓兩個列表，每一個產品選擇。使用jQuery可選的ID多次

這裏是我的代碼：

<!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模板，我需要做的所有項目中可選擇每個列表。

來源

2017-10-19 Kazuya91

你有沒有試圖改變ID類，並用它喜歡：'$（「.selectable」）.selectable（）;'' –

需要ID'是**獨特**。您應該**從不**在同一頁面上具有多個具有相同ID的元素。如果您需要多個元素，請使用'class'。 – Scott

@pala畲謝謝。現在它工作。是我嘗試過，但我有一個錯字。 – Kazuya91

你應該不使用一個ID不止一次整個站點。 ID的全部要點是它應該是獨特的。

要定位的多個元件，使用類。思考類的方式是他們對元素的類型或行爲進行「分類」。由於您試圖將每個列表分類爲「可選」，因此您可以使用.selectable類。

<ol class="selectable">

的Javascript

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

來源

2017-10-19 15:27:19 Soviut

謝謝你的回答。現在它可以工作。我想到了課程，我試了一下，但沒有奏效。也許我在某個地方有一個錯字。我想知道爲什麼它沒有工作。 – Kazuya91

@ Kazuya91最有可能你不小心在你的class名稱之前加上了一個點，在<'class =「。class」> selectable>>中。我們都犯了這個錯誤至少一次。 – Soviut

使用jQuery可選的ID多次

回答

相關問題