Toggle img src file path

Question

I have the following code:

<div class="flex-gametypes">
    <div><img src="assets/images/game/one.png"></div>
    <div><img src="assets/images/game/two.png"></div>
</div>

I have the following image files:

assets/images/game/one.png
assets/images/game/two.png
assets/images/game/one-highlight.png
assets/images/game/two-highlight.png

What I want to do:

When I click on one.png, the code must rename the file to one-highlight.png.

When I click on it (one.png) again, it should continue to be one-highlight.png.

But if I were to click on two.png, then one-highlight.png should be back as one.png and two.png should now be two-highlight.png

So, this is what I tried: (I got some help from this question).

$(document).ready(function(){
    $(".flex-gametypes img").click(function(){
        $(this).attr('src', $(this).attr('src').replace('-hightlight.png') + '');
        $(this).attr('src', $(this).attr('src').replace(/\.png/, '') + '-highlight.png');
    });
});

But this does not display the desired result. So how can I achieve this effect?

It's not displaying the desirable result because you are doing two replacements back-to-back: that's not a toggle logic you're looking for — Terry, Dec 23 '20 at 07:56
Hmm, the reason I wanted that was because I want to reset it each time it is clicked. — Gosi, Dec 23 '20 at 07:58
You will need to store the toggled binary state somewhere: how would your element know which state it is in? — Terry, Dec 23 '20 at 07:59
And I used the wrong word, its not toggle. What I want is like when an image is clicked, an image specific to it gets loaded. When its clicked again, then nothing happens. But if a different image is clicked, then the previously adjusted image goes back to the initial stage and the newly click image gets a new image. — Gosi, Dec 23 '20 at 07:59

VeteranSlayer · Answer 1 · 2020-12-23T08:27:13.843

1

Try this

$(document).ready(function(){
    $(".flex-gametypes div img").click(function(){
        $(".flex-gametypes div img").each(function(){
            $(this).attr('src', $(this).attr('src').replace('-highlight', ''));
        });
        $(this).attr('src', $(this).attr('src').replace(/\.png/, '') + '-highlight.png');
        
    });
});

When ever an image clicked the function removes every -highlight from every image and then adds the -hightlight only to the image that got clicked.

I hope this works for you.

edited Dec 23 '20 at 08:27

answered Dec 23 '20 at 08:06

VeteranSlayer

294
2
7

hi, this gives me error. If I click on the image , it does add the "-highlight.png". But if I click on it again, the file name becomes "one-highlight-highlight.png". – Gosi Dec 23 '20 at 08:12
sorry mate, had a typo on the first replacement on word `highlight`. I edited the code so it should work as expected – VeteranSlayer Dec 23 '20 at 08:27

score 1 · Answer 2 · 2020-12-23T08:36:01.220

1

Try replacing your jQuery with this:

$(document).ready(function(){
    $(".flex-gametypes img").click(function(){
        $(".flex-gametypes img").each(function(){
            $(this).attr('src', $(this).attr('src').replace('-highlight.png', '.png'));
        });
        $(this).attr('src', $(this).attr('src').replace('.png', '-highlight.png'));
        
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-gametypes">
  <div><img src="assets/images/game/one.png"></div>
  <div><img src="assets/images/game/two.png"></div>
</div>

I just fixed a typo and changed the replacement code. Hopefully this helps!

edited Dec 23 '20 at 08:36

answered Dec 23 '20 at 08:08

When I click on another image, the previously clicked image is still highlighted. – Gosi Dec 23 '20 at 08:14
@Gosi, sorry, I didn't see that part. Try my updated answer. – Dec 23 '20 at 08:36

admin web · Answer 3 · 2020-12-23T09:20:06.913

First it will change all the highlighted with normal then highlights the current image clicked, hope it helps

$(document).ready(function() {
  $(".flex-gametypes img").on('click',function() {
    $(".flex-gametypes img").each(function(i,obj){
          $(obj).attr('src', $(obj).attr('src').replace('-highlight.png', '.png'));
    })
      $(this).attr('src', $(this).attr('src').replace('.png', '-highlight.png'));
  });});

score 1 · Accepted Answer · answered Dec 23 '20 at 10:34

In my example I used indexOf(). Now it works the way you wanted. By the toggle principle.

$(".flex-gametypes img").each(function() {
  $(this).click(function() {
    if ($(this).attr('src').indexOf('-highlight.png') != -1) {
      $(this).attr('src', $(this).attr('src').replace(/\-highlight.png/, '') + '.png') 
    } else {
      $(this).attr('src', $(this).attr('src').replace(/\.png/, '') + '-highlight.png')
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-gametypes">
    <div><img src="assets/images/game/one.png"></div>
    <div><img src="assets/images/game/two.png"></div>
    <div><img src="assets/images/game/one-highlight.png"></div>
    <div><img src="assets/images/game/two-highlight.png"></div>
</div>

Toggle img src file path

4 Answers4