0

Há pouco tempo consegui resolver um problema de colocar uma imagem e quando clicasse nela, ela se tornasse outra, e quando fui passar o código para os outros collapses, me aconteceu isso:

Collapse fechado
collapse closed

Collapse 3 (Step 3) aberto apenas
collapse open

Quando clico no Step 2 ou no Step 3, as duas setas (que são imagens) trocam juntas, eu preciso fazer isso em mais 12 steps, só que elas tem que trocar de maneira independente, como posso fazer?

Código Step 2:

<h1 class="collapsed change" 
    data-toggle="collapse" 
    data-parent="#accordion" 
    href="#collapseTwo" 
    aria-expanded="false" 
    aria-controls="collapseTwo" 
    ng-click="alert_step2()"> 
    <img class="change img-change" src="assets/img/arrow_right.png" style="width: 20px; height: 25px">Step 2 - Acknowledge Your Strengths (highest scores)
</h1>

Código Step 3:

<h1 class="collapsed change" 
    data-toggle="collapse" 
    data-parent="#accordion" 
    href="#collapseThree" 
    aria-expanded="false" 
    aria-controls="collapseThree" 
    ng-click="alert_step3()">
    <img class="change img-change" src="assets/img/arrow_right.png" style="width: 20px; height: 25px">Step 3 - Consider The Areas of Your Life that Need Support (lowest scores)
</h1>

Código Javascript:

$('.change').click((e) => {
    var img1 = 'assets/img/arrow_right.png';
    var img2 = 'assets/img/arrow_down.png';
    var element = $('.img-change');
    if(element.attr('src') === img1)
    {
        element.attr('src',img2);
    }
    else if(element.attr('src') === img2)
    {
        element.attr('src',img1);
    }
});
3
  • 1
    Posta seu código, só com a imagem não da para te ajudar. Mas provavelmente os seus dois elementos tem o mesmo ID="" ai da pau mesmo
    – hugocsl
    Commented 25/10/2018 às 20:58
  • postado! havia esquecido Commented 25/10/2018 às 21:00
  • Irei postar a resposta com o código corrigido! Commented 25/10/2018 às 21:02

1 Resposta 1

1

Uma alternativa simples é adicionar um atributo "index" e alterar apenas o do mesmo index de onde veio o click, aqui vai um exemplo funcional:

    $('.change').click(function (){
      var img1 = 'https://i.sstatic.net/vIerE.png';
      var img2 = 'https://i.sstatic.net/cinkW.png';
      var index = $(this).attr('index');
      var element = $('img[index='+index+']');
      if(element.attr('src') === img1){
        element.attr('src',img2);
      }else if(element.attr('src') === img2){
        element.attr('src',img1);
      }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 index="1" class="change">Testando Click</h1>
    <img index="1" class="change img-change" src="https://i.sstatic.net/vIerE.png">
    <br>
    <h1 index="2" class="change">Testando Click</h1>
    <img index="2" class="change img-change" src="https://i.sstatic.net/vIerE.png">

1
  • Funcionou, muito obrigado Mateus! Commented 25/10/2018 às 21:23

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 .