如何使用.data（）更改jQuery中的元素样式

Question

我有以下标记：

<button class="clickIt" data-reference="abc" style="display:inline" type="button">Content</button>

如何使用jQuery和.data()方法根据元素的数据值有选择地更改样式？

我尝试了以下操作但它不起作用：

$( '.clickIt' ).click(function(){
  $(this).data('reference','abc').css('display','none');
});

我希望在点击比较.data()值时隐藏按钮。

感谢。

Answer 1

您可以使用条件，因为您对单个元素进行操作。

$( '.clickIt' ).click(function(){
    if ($(this).data('reference') === 'abc') {
        $(this).hide();
    }
});

Answer 2

您需要将数据作为选择器的一部分进行定位，如下所示：

$( ".clickIt[data-reference='abc']" ).click(function(){
  $(this).css('display','none');
});

或者与数据字段进行比较，如下所示：

$( '.clickIt' ).click(function(){
    if ($(this).data('reference') == 'abc') {
        $(this).hide();
    }
});

您使用.data( 'name', 'value')设置数据，而不是检索比较或根据值进行选择。