Jquery, exchanging images by clicking

Asked

Viewed 88 times

0

Guys I have code here and when I click on the image it changes the text , when you click on the bottom, it changes the text but I need that when you click on the image,that activates the function of jquery, change the image.

So for example, I need you to change /dwq/imagens/icon1 for /dwq/imagens/icon6 when the /dwq/imagens/icon1 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>
<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 answer

2

If you have the reference of data-tab and will always respect the nomenclature and the interval between the number of the originals and the number 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>
<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>

  • So bro, just like this if I click on the image and click on the other one. The first one I clicked on looks the same. I needed it to change. So you clicked on the first,

  • @Matheuslopes is what you said in the question with the phrase: "So for example, I need you to change /dwq/images/icon1 to /dwq/images/icon6 when the /dwq/images/icon1 is clicked.." ???

  • And try to publish these images somewhere... understand what you’re wanting with a broken html gets a little difficult

Browser other questions tagged

You are not signed in. Login or sign up in order to post.