¿Qué son los atributos data-?

Los atributos data- son atributos que se utilizan para almacenar datos en los elementos HTML. Son útiles para almacenar datos que no se van a mostrar en la página pero que pueden ser útiles para nuestro código JavaScript.

<div data-nombre="Miguel" data-edad="25"></div>

Ahora, para recuperar los datos, podemos usar el objeto dataset del elemento.

const div = document.querySelector('div')
console.log(div.dataset.nombre) // "Miguel"
console.log(div.dataset.edad) // "25"

El objeto dataset es un objeto que contiene todos los atributos data- del elemento, pero sin el prefijo data-.

También podemos recuperar los datos usando el método getAttribute del elemento.

const div = document.querySelector('div')

console.log(div.getAttribute('data-nombre')) // "Miguel"
console.log(div.getAttribute('data-edad')) // "25"

El método getAttribute devuelve el valor de cualquier atributo del elemento. Por eso, en este caso, debemos pasarle el nombre del atributo con el prefijo data-.

Filtrando los resultados de la lista de empleos

Con todo lo que hemos aprendido hasta ahora, podemos filtrar los resultados de la lista de empleos usando los atributos data- para recuperar los datos de los elementos HTML.

Lo primero es que en nuestro HTML debemos añadir el atributo data-modalidad a cada uno de los elementos de la lista de empleos.

<div class="jobs-listings">
  <article data-technology="react" data-modalidad="remoto" class="job-listing-card">...</article>

  <article data-modalidad="cdmx" class="job-listing-card">...</article>

  <article data-modalidad="guadalajara" class="job-listing-card">...</article>

  <article data-modalidad="remoto" class="job-listing-card">...</article>
</div>

Ahora que nuestro marcado está listo y nos indica la modalidad de cada uno de los empleos, podemos filtrar los resultados de la lista de empleos usando los atributos data- para recuperar los datos de los elementos HTML.

const filter = document.querySelector('#filter-modalidad')
const jobs = document.querySelectorAll('.job-listing-card')

filter.addEventListener('change', function () {
  const selectedValue = filter.value

  jobs.forEach((job) => {
    // recuperamos el valor de `data-modalidad` del elemento
    const modalidad = job.dataset.modalidad

    // si el valor seleccionado es vacío o es igual al valor de `data-modalidad` del elemento, mostramos el elemento
    if (selectedValue === '' || selectedValue === modalidad) {
      job.style.display = 'flex'
    } else {
      job.style.display = 'none'
    }
  })
})

¿Por qué usamos selectedValue === ''? Porque si el usuario no ha seleccionado ningún valor, entonces el valor de selectedValue será una cadena vacía.

¿Y por qué job.style.display = 'flex'? Porque antes de ocultarlo, ese elemento ya tiene el estilo display: flex aplicado. Así que si lo queremos mostrar, deberemos asegurarnos que sigue teniendo ese valor.

Ahora, vamos a terminar de estilar los selects para que se vean mejor.