点击事件获取data-pdf属性值返回undefined的问题排查

嘿，我来帮你排查下问题～

1. 为什么会返回undefined？ #

你的代码逻辑里犯了一个小错误：$(this)已经指向了被你点击的那个.pdfWrap元素，但你接着又调用了.find('.pdfWrap')——这相当于在当前点击的元素内部，再去找另一个带.pdfWrap类的子元素。如果你的DOM结构里没有这样的子元素，那自然找不到目标，data('pdf')就会返回undefined。

正确的写法应该直接从当前点击的元素本身获取data-pdf属性：

$(".pdfWrap").on("click", function (event) { 
  let pdfChoice = $(this).data('pdf'); 
  console.log(pdfChoice); 
});

2. 点击不同标题时值会变化吗？ #

这取决于每个.pdfWrap元素的data-pdf属性值：如果不同的.pdfWrap设置了不同的data-pdf值，那点击不同元素时，pdfChoice就会对应变成该元素的属性值；如果所有元素的data-pdf值都一样，那点击后的值自然不会变。

3. 每次只想存储一个值的需求能满足吗？ #

完全没问题！目前你的代码里，pdfChoice是点击事件函数内部的局部变量，每次点击都会重新赋值，只会存储当前点击的那个元素的data-pdf值，不会保留之前的旧值。

如果你需要在这个点击函数外部也能访问到最新的选中值，可以把pdfChoice声明在函数外面，这样每次点击都会覆盖它，始终只保留最后一次点击的结果：

let pdfChoice; // 把变量提升到外部作用域
$(".pdfWrap").on("click", function (event) { 
  pdfChoice = $(this).data('pdf'); 
  console.log(pdfChoice); 
});
// 之后在其他地方使用pdfChoice时，它就是最后一次点击选中的那个值

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