Alterar nome de classe dinamicamente

Oi Bruno, tudo bem?

Para alterar o nome da classe "produtos-item" de forma dinâmica com base no ID do produto, você pode utilizar a interpolação de strings no JavaScript. Vou te mostrar como fazer isso.

No seu código atual, a div com a classe "produtos-item" é criada dentro do loop "map" que itera sobre o array "items". Para adicionar um nome personalizado para cada produto, você pode concatenar o valor do ID do produto com o nome da classe.

Aqui está o código modificado:

items.map((val) => {
    containerProdutos.innerHTML += `
        <div class="produtos-item-${val.id}">
            <img src="${val.img}"/>
            <p>${val.nome}</p>
            <p>${val.valor}</p>
            <div class="controle">
                <button class="controle-ajuste" data-controle="-">-</button>
                <input type="text" class="controle-contador" value="00" data-contador>
                <button class="controle-ajuste" data-controle="+">+</button>
            </div>
            <a key="${val.id}" href="#">Adicionar ao carrinho</a>
        </div>
    `;
})

Nesse exemplo, substituímos a classe "produtos-item" por "produtos-item-${val.id}". Dessa forma, cada div terá um nome personalizado baseado no ID do produto.

Tenha em mente que essa alteração deve ser feita tanto na criação inicial dos elementos quanto em qualquer outra manipulação posterior que envolva as classes desses elementos.

É importante ressaltar que ao adicionar o ID do produto como parte do nome da classe, você precisa garantir que o ID seja um valor seguro, sem espaços em branco ou caracteres especiais que possam causar problemas no seu código. Certifique-se de validar o ID antes de utilizá-lo na concatenação.

Espero que essa solução seja útil para você.

Um abraço e bons estudos.