【问题标题】：identify the name or the id with farbtastic用 farbtastic 识别名称或 id
【发布时间】：2013-04-25 07:44:25
【问题描述】：

我有大约 8 种类型：

<input type="text" id="color1" name="color1" class="colorwell" value="#ffffff" />

到

<input type="text" id="color8" name="color8" class="colorwell" value="#ffffff" />

我有一个可变的颜色

 $('#picker').farbtastic('#color_picker_input').mouseup(function (){
      var colore = $.farbtastic('#picker').color;
 alert(colore);});

但我也想识别名称或 id

看起来像的东西

var nome = $.farbtastic('#picker').name;

这不起作用。我做错了什么？

【问题讨论】：

你想得到什么结果，一个包含所有元素 ids 的数组，它们的属性的一个对象，或者每次新的 id 被覆盖的单个变量找到了吗？

标签： jquery html color-picker farbtastic

【解决方案1】：

我没有使用过 Farbtastic，但您应该可以console.log($.farbtastic('#picker')) 在 JavaScript 控制台中查看有关该对象的所有信息。从中您可以确定名称的存储方式或获取名称的方式（如果它是一种方法）。

你也可以只使用 jQuery 的默认 attr() 方法：

$.farbtastic('#picker').attr('name');
// Or
$('#picker').attr('name');

我刚刚在官方网站上尝试过，实际上是这样的：

基于Farbtastic documentation，无法通过farbtastic对象调用name或id。你需要回退到通用 jQuery：

$('#picker').attr('name');
$('#picker').attr('id');

【讨论】：

请解释反对意见？这可能不会给出直接的答案，但它确实提供了一种轻松找出答案的方法...$.farbtastic('#picker') 将是一个对象，调用console.log($.farbtastic('#picker')); 将记录与其关联的所有属性和方法。

【解决方案2】：

获取所有ids，并推送到一个数组：

var ids = [];

$('.colorwell').each(function(){
    ids.push(this.id);
});
console.log(ids);

JS Fiddle demo.

要获取其他详细信息，并使用各种属性填充对象，或者更确切地说是对象的数组：

var colorwells = [],
    self;

$('.colorwell').each(function(){
    self = this;
    colorwells.push(
        {
            id : self.id,
            name : self.name,
            value : self.value
        }
    );
});
console.log(colorwells);

JS Fiddle demo.

专门用于解决您的问题，并请记住，我从未使用过 farbtastic（作为开发人员，尽管我知道它已广泛用于 UI），并假设您发布的代码（以提醒颜色）有效，那么我建议：

$('#picker').farbtastic('#color_picker_input').mouseup(function (){
    var colore = $.farbtastic('#picker').color,
        nome = this.id || '';
        console.log(colore, nome);
});

这应该检索任一当前 DOM 节点的 id 或空字符串（以防止有关 undefined 字符串/属性/对象的错误消息）。

虽然$(this).attr('id') 或$(this).prop('id') 有效，但调用 jQuery 来检索 DOM 节点的属性是不必要的昂贵（无需将节点包装到 jQuery 对象中就完全可用）。 p>

【讨论】：

【解决方案3】：

按照你的建议写

  $('#picker').farbtastic('#color_picker_input').mouseup(function (){
            var colore = $.farbtastic('#picker').color,
            nome = this.id || '';
          console.log(colore, nome);
                 // alert(nome);        
    });

在我阅读的控制台日志中：

21cc00 选择器

【讨论】：

【解决方案4】：

问题解决了！

$('#picker').farbtastic('#color_picker_input').mouseup(function (){

     var   nome = $("input:text:focus").attr("id");
     var   colore = $.farbtastic('#picker').color;

          console.log( colore, nome);
...

通过这种方式我确定使用了哪个文本框

【讨论】：