0

Galera eu to com codigo aqui e quando eu clico na imagem ele troca o texto , quando clica na de baixo, ele troca o texto porem eu preciso que quando clicar na imagem,que ativa a funcao do jquery, troque a imagem.

Entao por exemplo , preciso que troque /dwq/imagens/icon1 para /dwq/imagens/icon6 quando a /dwq/imagens/icon1 for clicada..

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>
<div class="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>

1 Resposta 1

2

Se você tem a referência do data-tab e sempre vai respeitar a nomenclatura e o intervalo de entre o numero dos originais e o número dos que serão alternados, você pode resolver da seguinte forma:

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>
<div class="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>

3
  • Entao mano, so que desse jeito se eu clicar na imagem e clicar na outra. A primeira que eu cliquei fica igual.. eu precisava que mudasse. Então clicou na primeira,mudou, cliquei na segunda,mudou a segunda e voltou a primeira pra original 31/10/2018 às 17:53
  • @MatheusLopes era isso que você disse na pergunta com a frase: "Entao por exemplo , preciso que troque /dwq/imagens/icon1 para /dwq/imagens/icon6 quando a /dwq/imagens/icon1 for clicada.." ??? 31/10/2018 às 18:44
  • E tenta publicar essas imagens em algum lugar... entender o que você está querendo com um html quebrado fica um pouco difícil 31/10/2018 às 18:46

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 .