Replacing part of an img src for multiple images using buttons

Question

I have this simple bit of HTML:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <button href="#" class="btn btn-primary">Small (32)</button> <button href="#" class="btn btn-danger">Medium (64)</button> <button href="#" class="btn btn-warning">Large (128)</button> <hr /> <img class="swap" title="jack-o-lantern" alt="jack-o-lantern" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f383.png"> <img class="swap" title="Christmas tree" alt="Christmas tree" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f384.png"> <img class="swap" title="fireworks" alt="fireworks" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f386.png"> <img class="swap" title="sparkler" alt="sparkler" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f387.png"> <img class="swap" title="sparkles" alt="sparkles" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/2728.png"> 

I'm trying to work out if it would be possible to use javascript to set the image source by clicking the buttons at the top of the snippet.

For example - when the page first loads, the image url is hard coded as:

https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f383.png

But then if a user were to click the Small (32) button, is it possible for all of the image source URLs to be updated without a page load to eg for a single image:

https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f383.png

And the equivalent for the Medium and Large buttons?

I have searched for eg replacing part of an img src, and found this post:

Changing part of image's source

With this solution:

$(function(){
  $('#myLink').click(function(){
    $('img').each(function(){
      var $this = $(this)
      $this.attr('src',$this.attr('src').replace('gray','green'))
    })
  })
})

However - in my case, I wouldn't be only replacing one value with another, but would need to change between 32, 64 and 128 depending on which button is clicked.

Answer 1

A simple solution to your problem is by giving each button an id represent the number to change this size for like this example

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <button href="#" id="32" class="btn btn-primary">Small (32)</button> <button href="#" id="64" class="btn btn-danger">Medium (64)</button> <button href="#" id="128" class="btn btn-warning">Large (128)</button> 

now add a script that select all this buttons by their id and then add listener to the click event and change the src attribute for all the images by selecting all of them

this is the complete solution

 const small = document.getElementById('32'); const medium = document.getElementById('64'); const large = document.getElementById('128'); // select all images const allImages = document.querySelectorAll('.swap') ; // this function takes number and change the src of all images function changeImagesSrc(number) { allImages.forEach(img=>{ // here we use regular expression to select the number and change it to a new one img.src = img.src.replace(/32|64|128/,number); }) } small.addEventListener('click',()=>{ changeImagesSrc(32); }) medium.addEventListener('click',()=>{ changeImagesSrc(64); }) large.addEventListener('click',()=>{ changeImagesSrc(128); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <button href="#" id="32" class="btn btn-primary">Small (32)</button> <button href="#" id="64" class="btn btn-danger">Medium (64)</button> <button href="#" id="128" class="btn btn-warning">Large (128)</button> <hr /> <img class="swap" title="jack-o-lantern" alt="jack-o-lantern" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f383.png"> <img class="swap" title="Christmas tree" alt="Christmas tree" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f384.png"> <img class="swap" title="fireworks" alt="fireworks" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f386.png"> <img class="swap" title="sparkler" alt="sparkler" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f387.png"> <img class="swap" title="sparkles" alt="sparkles" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/2728.png">