Learning jQuery 3 - Fifth Edition

Data attributes

HTML5 data attributes allow us to attach arbitrary data values to page elements. Our jQuery code can then use these values, as well as modify them. The reason for using data attributes is so that we can separate DOM attributes that control how they're displayed and how they behave, from data that's specific to our application.

You'll use the data() jQuery method to read data values and to change data values. Let's add some new functionality that allows the user to mark a paragraph as read by clicking on it. We'll also need a checkbox that hides paragraphs that have been marked as read. We'll use data attributes to help us remember which paragraphs have been marked as read:

$(() => {  $('#hide-read')    .change((e) => { if ($(e.target).is(':checked')) ...