Jquery：从attr到class加载值

Question

HTML

<button data-hover="bounce">test button</button>

JQUERY

$('[data-hover="bounce"]').addClass('hvr-' + $(this).attr('data-hover'));

但这不起作用。我得到了hvr-undefined。如何获得hvr-bounce？我是否要从data-hover属性加载值并从此值创建一个类，在本例中为hvr-bounce？

我想保留 $('[data-hover="bounce"]')

解决

$('[data-hover="bounce"]').addClass(function() {
    return 'hvr-' + $(this).attr('data-hover');
}).attr('data-hover', '');

Answer 1

在您的示例中，data-hover始终为bounce，因此您只需使用该.attr()而不是调用$('[data-hover="bounce"]').addClass('hvr-bounce'); 。

data-hover

如果要概括为所有.addClass()值，可以将函数传递给this。在该函数内部，$('[data-hover']).addClass(function() { return 'hvr-' + $(this).attr('data-hover'); }); 将被设置为正在处理的当前元素。

new