2

Fala galera, bom dia, to precisando de uma ajuda com um dropdown. a cada doação no banco de dados eu tenho um botão que se clico aparece os itens que foram doados.

estou com a seguinte linha de código:

user-donation.js

const dropdownBtns = document.querySelectorAll('.arrow img');
for (dropdownBtn of dropdownBtns){
    dropdownBtn.onclick = dropDown;
}
function dropDown(){
    const contents = document.querySelectorAll('.dropdown-content');
    for (let content of contents){
        content.classList.toggle("show");
    }
}

user-donations.js

<div class="dropdown">
    <div class="arrow">
        <img src="{% static 'images/arrow-down-icon.png' %}" alt="" id="arrow">
    </div>
    <div class="dropdown-content">
        <ul class="list-itens">
            {% for item in donation.items %}
            <li>{{item.material.name}} x{{item.quantity}}</li>
            {% endfor %}
        </ul>
    </div>
</div>

Porém quando eu clico em qualquer um dos dropdownBtn eu mostro os itens de todas as doações e não só a que eu quero.

Alguém será q consegue me ajudar ?

1 Resposta 1

4

Coloque um parâmetro na função dropDown() de onde você consegue saber a origem do clique.

function dropDown(e){...
                  ↑

Para saber qual elemento foi clicado e que chamou a função, você usa:

e.target

Com isso você consegue chegar ao elemento .dropdown-content próximo relacionado. Esse elemento é irmão do pai do botão clicado. Você chega nele com:

e.target.parentNode.nextElementSibling;
              ↑             ↑
             pai   irmão adjacente do pai

Exemplo:

const dropdownBtns = document.querySelectorAll('.arrow_img');
for (dropdownBtn of dropdownBtns){
    dropdownBtn.onclick = dropDown;
}
function dropDown(e){
   let alvo = e.target.parentNode.nextElementSibling;
   alvo.classList.toggle('show');
}
.dropdown-content{
   display: none;
}
.show{
   display: block;
}
<div class="dropdown">
    <div class="arrow">
        <img src="https://cdn3.iconfinder.com/data/icons/woothemesiconset/32/blue_arrow_down.png" alt="" class="arrow_img">
    </div>
    <div class="dropdown-content">
        <ul class="list-itens">
            {% for item in donation.items %}
            <li>{{item.material.name}} x{{item.quantity}}</li>
            {% endfor %}
        </ul>
    </div>
</div>
<div class="dropdown">
    <div class="arrow">
        <img src="https://cdn3.iconfinder.com/data/icons/woothemesiconset/32/blue_arrow_down.png" alt="" class="arrow_img">
    </div>
    <div class="dropdown-content">
        <ul class="list-itens">
            {% for item in donation.items %}
            <li>{{item.material.name}} x{{item.quantity}}</li>
            {% endfor %}
        </ul>
    </div>
</div>

Nota: nas imagens dos botões você está usando id="arrow". Imagino que esses botões serão repetidos, logo irão repetir o mesmo id, o que é incorreto. Um id deve ser único na página. Troque o id="arrow" por class="arrow_img".

Se quiser ocultar o que está aberto quando mostra outro, altere o código do for adicionando um if para remover a classe .show do que está aberto:

const dropdownBtns = document.querySelectorAll('.arrow_img');
for (dropdownBtn of dropdownBtns){
    dropdownBtn.onclick = dropDown;
}
function dropDown(e){

   let alvo = e.target.parentNode.nextElementSibling;

   const contents = document.querySelectorAll('.dropdown-content');
   for (let content of contents){
      if(alvo != content) content.classList.remove('show');
   }

   alvo.classList.toggle('show');

}
.dropdown-content{
   display: none;
}
.show{
   display: block;
}
<div class="dropdown">
    <div class="arrow">
        <img src="https://cdn3.iconfinder.com/data/icons/woothemesiconset/32/blue_arrow_down.png" alt="" class="arrow_img">
    </div>
    <div class="dropdown-content">
        <ul class="list-itens">
            {% for item in donation.items %}
            <li>{{item.material.name}} x{{item.quantity}}</li>
            {% endfor %}
        </ul>
    </div>
</div>
<div class="dropdown">
    <div class="arrow">
        <img src="https://cdn3.iconfinder.com/data/icons/woothemesiconset/32/blue_arrow_down.png" alt="" class="arrow_img">
    </div>
    <div class="dropdown-content">
        <ul class="list-itens">
            {% for item in donation.items %}
            <li>{{item.material.name}} x{{item.quantity}}</li>
            {% endfor %}
        </ul>
    </div>
</div>

1
  • 1
    o id="arrow" era pq eu estava tentando algo, mas depois percebi a incoerência, mas valeu por ter notado kkkkk, cara sua explicação foi simplesmente sensacional, consegui resolver o meu problema, muito obrigado. 13/11/2018 às 15:37

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 .