Добавить блоку data-ripple="true"?

Question

[Чёкатилло]

Не знаю, что это за data =)
Нужно мне добавить этот "класс" средствами скрипта

Было так:
<button class="fab-button"></button>

Стало так:

<button class="fab-button" data-ripple="true"></button>

делаю так:

$(document).ready(function(){
      $('.fab-button').addClass('[data-ripple="true"]');
});

Но, конечно же, не правильно =)

Спасибо!

Answer 1

[bkosun]

$('.fab-button').data('ripple', 'true');

https://api.jquery.com/data/

Answer 2

[Владимир]

Во-первых, data- - это не класс, а атрибут.
Во-вторых, у вас в коде я не увидел элемента с id="but", которому вы пытаетесь (неправильно) добавить класс.
В-третьих, атрибут добавляется так:
$(element).attr("data-rippe", "true")

Answer 3

[0xD34F]

Кому и что надо добавить:

const el = document.querySelector('.fab-button');
const key = 'ripple';
const val = 'true';

Добавляем:

el.dataset[key] = val;

// или

el.setAttribute('data-' + key, val);

// или

el.outerHTML = el.outerHTML.replace('>', `data-${key}="${val}"$&`);

// или

const attr = document.createAttribute('data-'.concat(key));
attr.value = val;
el.attributes.setNamedItem(attr);

Answer 4

[twobomb]

$(".fab-button").attr("data-ripple",true);