Невозможно отобразить несколько наборов цветов jPicker на той же странице

Мне трудно получить несколько экземпляров jPicker того же типа для отображения на одной и той же веб-странице. Вот некоторые примеры кода:Невозможно отобразить несколько наборов цветов jPicker на той же странице

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="js/jpicker-1.1.6/jpicker-1.1.6.min.js"></script> 
    <link href="js/jpicker-1.1.6/css/jPicker-1.1.6.min.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <div id="testArea"> 
     <script type="text/javascript">    
      $(document).ready(function() { 
       $('#Expandable').jPicker({ 
        window: { 
         expandable: true, 
         alphaSupport: true, 
         position: { 
          x: '40px', 
          y: '0px' 
         } 
        }, 
        images: { 
         clientPath: "js/jpicker-1.1.6/images/" 
        } 
       }); 
      }); 
     </script> 

     <div id="colorSelectors"> 
      <input type="checkbox" value="Hamburgers" checked="yes" /> Hamburgers 
       <span id="Expandable"></span> <br /> 
      <input type="checkbox" value="Hot Dogs" checked="yes" /> Hot Dogs 
       <span id="Expandable"></span> <br /> 
     </div> 
    </div> 
</body> 
</html>

Вот что я получаю:

My Sample Web Page

Что странно для меня является то, что если я использую различные типы jPickers, я могу иметь несколько экземпляров на том же страницу, но только один экземпляр каждого типа. Например, я могу использовать сборщик «Расширяемый» и сборщик «Inline» на той же странице, но я не могу использовать сборщики 2 «Inline» на одной странице.

Единственное исключение состоит в том, что я могу получить несколько экземпляров для работы, когда jPickers привязаны к элементу <input>, точно так же как example on the jPicker website. Но я не могу это работать ни на одном из других типов сборщиков.

источник

2012-06-11 Steph

Может быть, потому что есть повторяющиеся идентификаторы, попробуйте использовать класс вместо

$('.Expandable').jPicker({ 
... 
    <div id="colorSelectors"> 
     <input type="checkbox" value="Hamburgers" checked="yes" /> Hamburgers 
      <span class="Expandable"></span> <br /> 
     <input type="checkbox" value="Hot Dogs" checked="yes" /> Hot Dogs 
      <span class="Expandable"></span> <br /> 
    </div>

источник

2012-06-11 23:58:44 Musa

Ах, как глупо с моей стороны. Ты прав. Спасибо за помощь! – Steph

Невозможно отобразить несколько наборов цветов jPicker на той же странице

ответ

Смежные вопросы