无法在同一页面上显示多个 jPicker 颜色选择器
Posted
技术标签:
【中文标题】无法在同一页面上显示多个 jPicker 颜色选择器【英文标题】：Unable To Display Multiple jPicker Color Pickers On the Same Page 【发布时间】：2012-06-14 21:05:00 【问题描述】：我很难让多个相同类型的 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>
这是我得到的：
对我来说奇怪的是，如果我使用不同类型的 jPickers，我可以在同一页面上有多个实例，但每种类型只有一个实例。例如，我可以在同一页面上使用“可扩展”选择器和“内联”选择器，但不能在同一页面上使用 2 个“内联”选择器。
一个例外是当 jPickers 绑定到<input> 元素时，我可以让多个实例工作，就像example on the jPicker website 一样。但我不能将它用于任何其他类型的选择器。
【问题讨论】：
【参考方案1】：可能是因为有重复的 id，请尝试改用一个类
$('.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>
【讨论】：
以上是关于无法在同一页面上显示多个 jPicker 颜色选择器的主要内容，如果未能解决你的问题，请参考以下文章
jpicker默认颜色中的第4和第5列颜色不要在我的输入框中输入值