jquery onclick toggle image src

Question

I put together this code here:

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'memes/2a.png')
             ? 'memes/2b.png'
             : 'memes/2a.png';
         $(this).attr('src', src);
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<a href="#"><img id="img1" src="memes/2a.png" height="500" width="600"></a>

It should toggle between the two images: 2a.png and 2b.png it nothing happens when i click on it.

Can someone tell me what i'm doing wrong?

Asons · Accepted Answer · 2017-01-21 20:28:47Z

The main problem here is your anchor element, which cause the page to reload

Simply remove the anchor element and give the image a pointer cursor

Without anchor a, with cursor on image

$('img').on({
    'click': function() {
         document.querySelector('span').textContent = $(this).attr('src');
         var src = ($(this).attr('src') === 'animals/5/')
             ? 'animals/6/'
             : 'animals/5/';
         $(this).attr('src', src);
     }
});

#img1 {
  cursor: pointer;
}

span {
  vertical-align: top;
  padding: 5px 10px;
  background: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<base href="http://lorempixel.com/300/300/">
<img id="img1" src="animals/5/" height="300" width="300">
<span></span>

With anchor a, which will not work properly

$('img').on({
    'click': function() {
         document.querySelector('span').textContent = $(this).attr('src');
         var src = ($(this).attr('src') === 'animals/5/')
             ? 'animals/6/'
             : 'animals/5/';
         $(this).attr('src', src);
     }
});

span {
  vertical-align: top;
  padding: 5px 10px;
  background: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<base href="http://lorempixel.com/300/300/">
<a href="#"><img id="img1" src="animals/5/" height="300" width="300"></a>
<span></span>

Another option is to cancel the event bubbling, and keep the anchor a, though I still recommend to simply remove it

$('img').on({
    'click': function(e) {
         document.querySelector('span').textContent = $(this).attr('src');
         var src = ($(this).attr('src') === 'animals/5/')
             ? 'animals/6/'
             : 'animals/5/';
         $(this).attr('src', src);
         e.stopPropagation();
         return false;
     }
});

span {
  vertical-align: top;
  padding: 5px 10px;
  background: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<base href="http://lorempixel.com/300/300/">
<a href="#"><img id="img1" src="animals/5/" height="300" width="300"></a>
<span></span>

Thanks for the help, I chose to delete the anchor and use the CSS pointer class. It works perfectly now just as I wanted it to.

Max Sindwani · Accepted Answer · 2017-01-21 19:48:33Z

As others have pointed out, it's likely because of a relative path issue. If you don't want to use an absolute path, you can keep a data attribute on the image to know how to handle the toggles.

$('img').on({
  'click': function() {

    var i = $(this).attr('data-index');
    switch (i) {
      case '0':
        i = '1';
        src = 'https://unsplash.it/100/100?image=1';
        break;
      case '1':
      default:
        i = '0';
        src = 'https://unsplash.it/100/100?image=0';
        break;
    }

    $(this)
      .attr('src', src)
      .attr('data-index', i);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<a href="#">
  <img id="img1" data-index='1' src="https://unsplash.it/100/100?image=1">
</a>

Collectives™ on Stack Overflow

jquery onclick toggle image src

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related