Question

我正在使用Bootstrap Colorpicker 2.1以便在表单中显示两个颜色选择器。使用一个输入一切正常，但是当我添加第二个输入时，只有第一个输入有效。也许是因为他们共享同一个班级......

任何想法为什么会发生这种情况？

<form method="post">

<p><?php _e("Box 1: " ); ?>
<input 
class="form-control demo" 
data-horizontal="true" 
id="demo_forceformat" 
placeholder="<?php echo $box1?>" 
type="text" 
name="box1" 
value="<?php echo $box1?>" 
size="20">
<?php _e(" Default: rgba(14,112,209,1)" ); ?></p>

<p><?php _e("Box 2 " ); ?>
<input 
class="form-control demo" 
data-horizontal="true" 
id="demo_forceformat" 
placeholder="<?php echo $box2?>" 
type="text" 
name="box2" 
value="<?php echo $box2?>" 
size="20">
<?php _e(" Default: rgba(144,112,209,1)" ); ?></p>

Answer 1

它可能与共享相同的ID有关。

对于页面上的每个元素，ID应该是唯一的。

将id="demo_forceformat"更改为id="demo_forceformat2"，甚至更好，将id属性的值与name属性相同。对表单元素使用相同的id和name值是一种常见的约定。

Answer 2

我需要使用

调用该函数

$(function(){
    $('#demo_forceformat_2').colorpicker({
            format: 'rgba', // force this format
            horizontal: true
        });
});

JS - 颜色选择器只有第一个工作

2 个答案: