jquery - 用 farbtastic 识别名称或 id

Question

我有大约 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);});

但我也想确定姓名或身份证

看起来像的东西

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

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

Answer 1

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

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

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

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

根据Farbtastic 文档，无法调用name或id通过farbtastic对象。您需要回退到通用 jQuery：

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

Answer 2

按照你的建议写

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

在控制台日志上我读到：

21cc00 拾取器

Answer 3

问题解决了！

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

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

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

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

Answer 4

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

var ids = [];

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

JS 小提琴演示。

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

var colorwells = [],
    self;

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

JS 小提琴演示。

专门解决您的问题，并记住我从未使用过 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')or$(this).prop('id') 有效，但调用 jQuery 来检索 DOM 节点的属性是不必要的昂贵（无需将节点包装到 jQuery 对象中就完全可用）。