为何HTML5 data属性返回函数而非指定值？jQuery设置失效排查

嘿，我来帮你捋清楚这个问题的根源，一步步解决：

首先，为什么console.log()会返回函数？ #

你提到输出返回函数，最大的可能是变量名冲突！看你的代码里定义了var select1 = $("#select1").data("myval");，如果之前全局作用域里已经有个叫select1的函数，或者你不小心把变量名和jQuery的内置方法重名了，就会出现这种情况。另外也有可能是你在调用方法时漏了括号？不过看你的代码里是加了括号的，所以优先排查变量名冲突的问题。

搞懂attr()和data()的核心区别（很多人踩这个坑） #

这俩方法看起来都是操作data属性，但本质完全不一样：

• attr("data-myval", "true")：直接修改DOM元素上的data-myval属性，打开浏览器开发者工具看HTML结构，能看到这个属性的变化。
• data("myval", "true")：修改的是jQuery内部缓存的data对象，不会更新DOM上的data-*属性！后续用data("myval")获取的是缓存里的值，而用attr("data-myval")拿到的还是DOM上原来的旧值。

所以如果你用data()设置后，跑去看DOM属性或者用attr()获取，肯定会觉得“无效”——这其实是使用方式错了，不是方法本身的问题。

为什么设置操作没效果？ #

我帮你列几个最常见的原因：

1. 元素选择器根本没找到目标元素 #

先确认页面上真的存在id="select1"和id="select2"的元素！你可以在代码开头加两行测试：

console.log("select1是否存在：", $("#select1").length > 0);
console.log("select2是否存在：", $("#select2").length > 0);

如果输出false，说明id写错了，或者元素是动态生成的（如果是动态生成的，得等元素创建完成后再执行操作，或者用事件委托）。

2. 代码里的拼写错误导致中断 #

你代码里的$(this).childre...明显是children()的拼写错误！这个错误会直接导致整个click事件里的代码无法执行——如果你的设置操作是在这个错误代码后面，那根本就没运行到，自然没效果。

3. 变量名冲突导致操作对象错误 #

比如你定义了var select2 = $("#select2").data("myval");，之后又不小心写成select2.data("myval", "true")——但这时候select2是之前获取的data值（可能是undefined或者其他非jQuery对象的值），调用它的data()方法当然会出问题，甚至返回奇怪的函数。

修复方案和测试代码 #

按照下面的步骤调整，应该就能解决问题：

1. 修正拼写错误：把childre改成children，确保click事件里的代码能正常执行。
2. 区分attr()和data()的使用方式：
   • 要修改DOM上的data-*属性，就用attr()，获取的时候也用attr()：

     $("#select2").attr("data-myval", "true");
     console.log($("#select2").attr("data-myval")); // 输出"true"
     

   • 只是需要在jQuery内部存数据，不需要改DOM，就用data()，获取也用data()：

     $("#select2").data("myval", "true");
     console.log($("#select2").data("myval")); // 输出"true"
     

3. 避免变量名冲突：给变量加个前缀，比如$select1表示jQuery对象，select1Val表示获取到的值，这样不容易搞混：

   var $select1 = $("#select1");
   var select1Val = $select1.data("myval");
   

给你一个完整的测试代码，你可以直接跑一遍看输出：

$(document).ready(function() { 
  // 先检查元素是否存在
  console.log("select1是否存在：", $("#select1").length > 0);
  console.log("select2是否存在：", $("#select2").length > 0);

  // 获取初始值
  var select1Val = $("#select1").data("myval"); 
  var select2Val = $("#select2").data("myval"); 
  console.log("select1初始data值：", select1Val); 
  console.log("select2初始data值：", select2Val); 

  // 测试attr设置
  $("#select2").attr("data-myval", "true");
  console.log("用attr设置后 - DOM属性值：", $("#select2").attr("data-myval"));
  console.log("用attr设置后 - jQuery缓存值：", $("#select2").data("myval")); // 缓存值不变，除非之前没设置过

  // 测试data设置
  $("#select2").data("myval", "true");
  console.log("用data设置后 - jQuery缓存值：", $("#select2").data("myval"));
  console.log("用data设置后 - DOM属性值：", $("#select2").attr("data-myval")); // DOM值不变

  $("#select1").click(function() { 
    // 修正拼写错误，这里替换成你的实际操作
    $(this).children().css("color", "red");
    // 点击时设置data
    $(this).data("myval", "clicked");
    console.log("select1点击后的data值：", $(this).data("myval"));
  });
});

内容的提问来源于stack exchange，提问作者Cyberstaker