jquery - 使用带有数据属性的 JQuery 的驼峰式大小写问题

Question

我让这段代码工作正常，直到我从“_”转换为驼峰式大小写。这是代码:

//Selecting the form id
formSelector = "#" + formId; 

//Selecting all input/select/textarea fields with data- attributes
elementSelector = formSelector + " input[data-errArrow], " + 
  formSelector + "      select[data-errArrow],     " + formSelector 
  +  " textarea[data-errArrow]";

//For each selected element...
$(elementSelector).each(function(index,element) {
  console.log($(this).prop("tagName"));
  console.log($(this).attr("data-errArrow"));
  console.log($(this).data("errArrow"));
  ...
 }

控制台输出为:

INPUT
mylib.js:25 R
mylib.js:26 undefined

如果 data-errArrow 属性的值正确显示为“R”，该元素的 .data 不应该也显示相同的结果吗？为什么它是未定义的。有讨论here JQuery 文档中与 data- 属性相关的驼峰式大小写。它说:

“如果传递的键没有存储数据，jQuery 会在元素的属性中搜索，将驼峰式字符串转换为虚线字符串，然后在结果前添加数据。因此，字符串 lastValue 被转换到数据最后一个值。”

我不明白这在上面如何适用。我需要解决这个问题。我希望 .data 在示例中返回“R”。

Answer 1

data-err-arrow="valuehere" 将返回值:

.data('errArrow')

data-errArrow="valuehere" 因为没有破折号将返回:

.data('errarrow');

因为没有破折号，所以键被转换为全部小写。

http://jsfiddle.net/txo5sxp0/

这不是 jQuery 代码，只是让您了解它在做什么:

function CamelCase(str) {

    var key;
    var data = str.split("-");

    for (i = 0; i < data.length; i++) {
        if (i == 0) {
            key = data[i].toLowerCase();
        } else {
            key += (data[i].charAt(0).toUpperCase() + data[i].slice(1)).toString();
        }
    }
    return key
}

var datakey = 'err-arrow';
var datakey2 = 'errArrow';

console.log(CamelCase(datakey)); //returns errArrow
console.log(CamelCase(datakey2)); //returns errarrow

http://jsfiddle.net/5jum59s4/