如何使用 jQuery 更改数据图标值？

Question

I have an ajax "load more/show less" button on my blog. The default button text is "More Posts" with a down arrow icon.

More Posts button

When the button is clicked, the text changes to "Less Posts", but I can't figure out how to change the icon to an up icon.

Less Posts button

In the code below, I need to change the value of data-icon="7" to data-icon="6" .

<a class="et_pb_button et_pb_custom_button_icon el-pagination-button el-button el-show-less" href="https://wbj1.flywheelsites.com/blog/?el_dbe_page" data-icon="7">Less Posts</a>

I tried this jQuery snippet without any luck, but I'm not very skilled in javascript or jQuery so it could be wrong:

document.getElementByClassName("el-show-less").setAttribute("data-icon"), "6");

Answer 1

If you want to change the value of data-icon using pure Javascript you can handle that like this

let element = document.querySelector('.el-show-less');
element.dataset.icon = 7;

Using jQuery you can perform that like this

let element = $('.el-show-less');
element.data('icon', 4);