2

Essa pergunta é semelhante ao mudar cor so de elemento clicado a diferença é que é usado Jquery e eu preciso de JS puro, eu tenho alguns elementos <summary> e quando eu clicar no elemento <summary> atual ele mude de cor no caso vermelho quando eu clicar em outro elemento <summary> (ou seja deixar de clicar no elemento <summary> atual) o anterior (que era o atual) volte com a cor original (preta):

const summary = document.querySelectorAll('summary');

for (let i = 0; i < summary.length; i++) {
    summary[i].onclick = () => {
        summary[i].style.color = 'red';
    }
}
<html>
<body>
    <details>
        <summary>Title 1</summary>
        <ul>
            <li>Content 1</li>
            <li>Content 2</li>
            <li>Content 3</li>
        </ul>
    </details>
    <details>
        <summary>Title 2</summary>
        <ul>
            <li>Content 1</li>
            <li>Content 2</li>
            <li>Content 3</li>
        </ul>
    </details>
</body>
</html>

Os elementos <summary> até muda de cor só que se clicar em todos ambos vão ter a cor e eu não sei como verificar o elemento <summary> que foi clicado anteriormente para que ele mude para a cor original ou seja no caso para mim verificar os elementos que foram clicados foi fácil, mas e os que não foram?.

2 Respostas 2

2

Podes fazer isso com classes. Adicionando e removendo com el.classList.add( e .remove(. Mas já que estás a fazer diretamente na propriedade do elemento o que te falta é, dentro de um loop, repor valores a cada click.

A idea é criar uma variável que se lembre do elemento que recebe o onclick e depois correr um for com todos os elementos dentro da callback do click. Dentro desse for verificas quando o sumary[j] é o mesmo que o el que foi clicado e dás-lhe a cor certa.

Exemplo:

const summary = document.querySelectorAll('summary');

for (let i = 0; i < summary.length; i++) {
  const el = summary[i];
  el.onclick = () => {
    for (let j = 0; j < summary.length; j++) {
      const color = summary[j] === el ? 'red' : 'inherit';
      summary[j].style.color = color;
    }
  }
}
<html>

<body>
  <details>
    <summary>Title 1</summary>
    <ul>
      <li>Content 1</li>
      <li>Content 2</li>
      <li>Content 3</li>
    </ul>
  </details>
  <details>
    <summary>Title 2</summary>
    <ul>
      <li>Content 1</li>
      <li>Content 2</li>
      <li>Content 3</li>
    </ul>
  </details>
</body>

</html>

3
  • Perfeito amigo! era justamente isso, obrigado ajudou muito. Commented 25/07/2020 às 19:22
  • Só que está sendo comparado todos os elementos ou um em específico? Commented 25/07/2020 às 20:03
  • @felipecardozo a cada clique o código percorre todos os elementos e muda a cor de cada um. Dentro do loop ele verifica se o item iterado é o que foi clicado e a esse específico dá a cor red
    – Sergio
    Commented 25/07/2020 às 20:31
1

Uma alternativa (com limitações, já veremos a seguir) é, sempre que clicar em um summary, procure se já existe um vermelho (e caso exista, mude a cor de volta para a original), e depois mude a cor do elemento clicado para vermelho:

document.querySelectorAll('summary')
    .forEach(s => s.addEventListener('click', function(event) {
        const vermelhoAtual = document.querySelector('summary[style="color: red;"]');
        if (vermelhoAtual) vermelhoAtual.style.color = 'inherit';
        s.style.color = 'red';
    })
);
<html>
<body>
    <details>
        <summary>Title 1</summary>
        <p>Content 1</p>
    </details>
    <details>
        <summary>Title 2</summary>
        <p>Content 2</p>
    </details>
    <details>
        <summary>Title 3</summary>
        <p>Content 3</p>
    </details>
    <details>
        <summary>Title 4</summary>
        <p>Content 4</p>
    </details>
</body>
</html>

Como a ideia é que somente um summary por vez pode ser vermelho, não precisaria fazer um loop por todos, como sugeriu a outra resposta (que é uma alternativa mais geral, caso tivesse a possibilidade de ter mais de um elemento vermelho, aí faria mais sentido percorrer todos e mudar a cor um a um - se bem que bastaria trocar querySelector por querySelectorAll no código acima, para buscar somente os elementos vermelhos).

Enfim, se é garantido que somente um elemento será vermelho por vez, basta buscar por ele, usando o seletor 'summary[style="color: red;"]', e mudar a cor caso ele exista.


Mas como já dito no início, esta solução é um pouco limitada.

A limitação é que isso só funciona se o elemento não tiver outros estilos inline. Por exemplo, se tiver style="font-weight: bold; color: red;, ou até mesmo se tiver style="color: red" (sem o ponto-e-vírgula), o seletor já não pega mais o elemento.

Daria até para contornar com document.querySelectorAll('summary[style*="color: red"]') (repare no *= em vez de apenas =, veja aqui alguns exemplos e a documentação para mais detalhes), mas aí talvez seja melhor usar classes e buscar pelos elementos que possuem aquela classe, por exemplo.

Uma outra alternativa é guardar o elemento vermelho, assim não precisamos buscá-lo toda hora (novamente, assumindo que não pode ter mais de um vermelho ao mesmo tempo):

var vermelhoAtual = undefined;

document.querySelectorAll('summary')
    .forEach(s => s.addEventListener('click', function(event) {
        if (s == vermelhoAtual) return; // cliquei no mesmo elemento, não precisa fazer nada
        if (vermelhoAtual) vermelhoAtual.style.color = 'inherit';
        s.style.color = 'red';
        vermelhoAtual = s;
    })
);
<html>
<body>
    <details>
        <summary>Title 1</summary>
        <p>Content 1</p>
    </details>
    <details>
        <summary>Title 2</summary>
        <p>Content 2</p>
    </details>
    <details>
        <summary>Title 3</summary>
        <p>Content 3</p>
    </details>
    <details>
        <summary>Title 4</summary>
        <p>Content 4</p>
    </details>
</body>
</html>

1
  • 1
    Boa, resposta! gostei da primeira possibilidade. Commented 28/07/2020 às 19:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .