Jquery, exchange images when clicking

0
When I click on the image it changes the text, when it clicks on the bottom, it changes the text but I need it when I click on the image, which activates the jquery function, change the image.

So, for example, I need to switch% from% to% with% when% of% is clicked.

jQuery(document).ready(function() {

  jQuery('.touch').click(function() {
    var tab_id = jQuery(this).attr('data-tab');

    //		jQuery('.tocuh').removeClass('current');
    jQuery('.touch').removeClass('current');
    jQuery('.tab-content').removeClass('current');

    jQuery(this).addClass('current');
    jQuery("#" + tab_id).addClass('current');
  })

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="container_promises">
  <div class="images_promises">
    <div alt="Parceria" style="height: 118px;" class="touch" id="lala" data-tab="tab-1">
      <img src="/dwq/imagens/icon1">
    </div>
    <div alt="Parceria" style="height: 118px;" class="touch" id="lala2" data-tab="tab-2">
      <img src="/dwq/imagens/icon2">
    </div>
    <div alt="Parceria" style="height: 118px;" class="touch" id="lala3" data-tab="tab-3">
      <img src="/dwq/imagens/icon3">
    </div>
    <div alt="Parceria" style="height: 118px;" class="touch" id="lala4" data-tab="tab-4">
      <img src="/dwq/imagens/icon4">
    </div>
    <div alt="Parceria" style="height: 118px;" class="touch" id="lala5" data-tab="tab-5">
      <img src="/dwq/imagens/icon5">
    </div>
    <!-- img src="/dwq/imagens/icon5"> -->
    <!-- img src="/dwq/imagens/icon6"> -->
    <!-- img src="/dwq/imagens/icon7"> -->
    <!-- img src="/dwq/imagens/icon8"> -->
    <!-- img src="/dwq/imagens/icon9"> -->
    <!-- img src="/dwq/imagens/icon10"> -->
  </div>
  <div id="tab-1" class="tab-content current">
    <div class="text_diferente">


      <p>lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type</p>

    </div>
  </div>
  <div id="tab-2" class="tab-content">
    <div class="text_diferente">

      <p>lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type</p>
    </div>
  </div>
  <div id="tab-3" class="tab-content">
    <div class="text_diferente">

      <p>lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type</p>
    </div>
  </div>
  <div id="tab-4" class="tab-content">
    <div class="text_diferente">

      <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type</p>

    </div>
  </div>
  <div id="tab-5" class="tab-content">
    <div class="text_diferente">
      <p>lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type</p>
    </div>
  </div>
</div>
    
asked by anonymous 31.10.2018 / 16:48

1 answer

2

If you have the reference of data-tab and you will always respect the nomenclature and the interval between the number of originals and the number of the ones that will be alternated, you can solve as follows:

jQuery(document).ready(function() {

  jQuery('.touch').click(function() {
  
    var tab_id = jQuery(this).attr('data-tab');
    var intervalo = $('.touch').length;
  
    var prefixo = "/dwq/imagens/icon";    
    var sufixoTab = parseInt(tab_id.replace(/\D/g, ""));
    
    var $imagem = $(this).children('img');
    var sufixoImagem = parseInt($imagem.attr('src').replace(/\D/g, ""))
    
    var caminhoImagem;
    
    if(sufixoImagem === sufixoTab){
      caminhoImagem = prefixo + (sufixoTab + intervalo);
    }else
    {
     caminhoImagem = prefixo + sufixoTab;
    }
    
    $imagem.attr('src', caminhoImagem);
    
    console.clear();
    console.log(caminhoImagem);
    
    
    //		jQuery('.tocuh').removeClass('current');
    jQuery('.touch').removeClass('current');
    jQuery('.tab-content').removeClass('current');

    jQuery(this).addClass('current');
    jQuery("#" + tab_id).addClass('current');
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="container_promises">
  <div class="images_promises">
    <div alt="Parceria" style="height: 118px;" class="touch" id="lala" data-tab="tab-1">
      <img src="/dwq/imagens/icon1">
    </div>
    <div alt="Parceria" style="height: 118px;" class="touch" id="lala2" data-tab="tab-2">
      <img src="/dwq/imagens/icon2">
    </div>
    <div alt="Parceria" style="height: 118px;" class="touch" id="lala3" data-tab="tab-3">
      <img src="/dwq/imagens/icon3">
    </div>
    <div alt="Parceria" style="height: 118px;" class="touch" id="lala4" data-tab="tab-4">
      <img src="/dwq/imagens/icon4">
    </div>
    <div alt="Parceria" style="height: 118px;" class="touch" id="lala5" data-tab="tab-5">
      <img src="/dwq/imagens/icon5">
    </div>
    <!-- img src="/dwq/imagens/icon5"> -->
    <!-- img src="/dwq/imagens/icon6"> -->
    <!-- img src="/dwq/imagens/icon7"> -->
    <!-- img src="/dwq/imagens/icon8"> -->
    <!-- img src="/dwq/imagens/icon9"> -->
    <!-- img src="/dwq/imagens/icon10"> -->
  </div>
  <div id="tab-1" class="tab-content current">
    <div class="text_diferente">


      <p>lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type</p>

    </div>
  </div>
  <div id="tab-2" class="tab-content">
    <div class="text_diferente">

      <p>lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type</p>
    </div>
  </div>
  <div id="tab-3" class="tab-content">
    <div class="text_diferente">

      <p>lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type</p>
    </div>
  </div>
  <div id="tab-4" class="tab-content">
    <div class="text_diferente">

      <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type</p>

    </div>
  </div>
  <div id="tab-5" class="tab-content">
    <div class="text_diferente">
      <p>lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type</p>
    </div>
  </div>
</div>
    
31.10.2018 / 17:23