如何使用jQuery的.data()方法根据元素数据值修改样式？

首先得指出你原代码的问题所在：你写的$(this).data('reference','abc')是设置这个按钮的data-reference值为abc，而不是去判断它当前的取值。这就导致不管按钮原本的data-reference是什么，执行这行代码后都会被改成abc再隐藏，和你想要的「根据现有数据值判断是否隐藏」逻辑不符。

下面给你两种符合需求的写法：

写法一：点击时判断数据值再操作 #

在点击事件里先获取当前按钮的data-reference值，判断是否等于abc，如果是就隐藏它：

$('.clickIt').click(function(){
  // 获取当前元素的data-reference数据值
  const reference = $(this).data('reference');
  // 对比值，符合条件则隐藏
  if (reference === 'abc') {
    $(this).css('display', 'none');
    // 也可以用jQuery更简洁的hide()方法：$(this).hide();
  }
});

这里要注意：.data()方法只传键名（比如data('reference')）时是获取数据，传键名+值时是设置数据，这是你之前混淆的点。

写法二：提前筛选元素再绑定事件 #

如果你的按钮初始状态下data-reference就是abc，可以直接在选择器里筛选出符合条件的元素，再绑定点击隐藏事件，这样不需要在事件里做判断，效率更高：

// 只选中data-reference为abc的.clickIt按钮
$('.clickIt[data-reference="abc"]').click(function(){
  $(this).hide();
});

两种写法都能实现你想要的「点击按钮时，通过data值判断并隐藏」的效果，你可以根据实际场景选择~

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