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

Question

我的博客上有一个 ajax“加载更多/显示更少”按钮。默认按钮文本是带有向下箭头图标的“更多帖子”。

更多帖子按钮

单击按钮时，文本变为“Less Posts”，但我不知道如何将图标更改为向上图标。

减少帖子按钮

在下面的代码中，我需要将data-icon="7"的值更改为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>

我尝试了这个 jQuery 片段，但没有任何运气，但我对 javascript 或 jQuery 不是很熟练，所以它可能是错误的：

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

Answer 1

如果您想更改data-icon使用纯 Javascript 的值，您可以像这样处理

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

使用 jQuery 你可以像这样执行

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