Jquery: change multiple img sources with equation

[crispybagel]

So what i'm trying to do is to have a checkbox next to my image carousel/slider. By default the checkbox is not checked, if you check i want to change 10+ image sources by going from "picture_1.png" to "picture_1F.png"  "picture_2.png" to "picture_2F.png" etc. If the checkbox is then unchecked it should remove the "F" from the image src name, basically toggling two different sets of pictures. 

Can i do some kind of math that adds and subtracts a single letter to the image sources. I don't know the specific code but i imagine something like this.

 

$(".checkbox").click(function(){
    if($(this).is(":checked.")) {
      $(".images").attr("src","current + F.png");
    } else if($(this).is(":not(:checked.)")) {
      $(".images").attr("src", "current - F.png");
    }
  });

 

[IAmAndre]

No you cannot "subtract" strings. There are a few approaches to this.

 

If there is a logic in the filenames you can have a loop and generate the filenames programmatically. I'm on mobile but it should look like:

 

$('.images'). each (function (index){

     $(this).src('picture_'+index);

})

 

Or if there's no logic in the file names you can just use a regular expression to add or remove the suffix.

[crispybagel]

9 hours ago, IAmAndre said:

No you cannot "subtract" strings. There are a few approaches to this.

 

If there is a logic in the filenames you can have a loop and generate the filenames programmatically. I'm on mobile but it should look like:

 

$('.images'). each (function (index){

     $(this).src('picture_'+index);

})

 

Or if there's no logic in the file names you can just use a regular expression to add or remove the suffix.

What would the regular expression look like? i'm don't have much experience with java.

[AnotherMax]

I don't really know any JQuery any more but if you want to programmtically add/remove something based on a boolean value it should be quite straight forward like so: This uses formated strings, so you can kinda add variables into strings using `${variable_name}` or a ternary operater which are really nice to use: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

function get_image_name(filename, is_checked) {
  // Returns the file name with 'F' attached if is_checked is true, 
  // otherwise just the filename with '.png' appeneded.
  return `${filename}${(is_checked) ? 'F' : ''}.png`  // Backticks allow for formatted strings
}

x = get_image_name("picture_1", true)  // Returns --> picture_1F.png

y = get_image_name("picture_1", false)  // Returns --> picture_1.png

You can ofcouse modify the 'F' to be what you want etc or even add it as an extra parameter.

Though thinking about it, this may or may not work depending on how you get the 'current' filename. As if you get it from the 'src' you'd need ot strip out the 'F.png', To do that you'd want to first remove the '.png' as thats consitent could use: str.replace(".png", "") -> returns new string without '.png', then add a check to see if the magical 'F' is the last index in the string, if it is then you can replace that then you'll have the original file name without the prefix.

 

[IAmAndre]

50 minutes ago, AnotherMax said:

I don't really know any JQuery any more but if you want to programmtically add/remove something based on a boolean value it should be quite straight forward like so: This uses formated strings, so you can kinda add variables into strings using `${variable_name}` or a ternary operater which are really nice to use: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

function get_image_name(filename, is_checked) {
  // Returns the file name with 'F' attached if is_checked is true, 
  // otherwise just the filename with '.png' appeneded.
  return `${filename}${(is_checked) ? 'F' : ''}.png`  // Backticks allow for formatted strings
}

x = get_image_name("picture_1", true)  // Returns --> picture_1F.png

y = get_image_name("picture_1", false)  // Returns --> picture_1.png

You can ofcouse modify the 'F' to be what you want etc or even add it as an extra parameter.

Though thinking about it, this may or may not work depending on how you get the 'current' filename. As if you get it from the 'src' you'd need ot strip out the 'F.png', To do that you'd want to first remove the '.png' as thats consitent could use: str.replace(".png", "") -> returns new string without '.png', then add a check to see if the magical 'F' is the last index in the string, if it is then you can replace that then you'll have the original file name without the prefix.

 

That's a good idea. I have a clearer syntax though:

 

return filename + ( is_checked ? 'F' : '') + 'png'; // Haven't tested it though

Instead, if you want to go the regex route, the regex would be like

(^.+)\.png$

The parentheses allow you to capture the string, and you can then access it using $1. For example

str.replace(/(^.+)\.png$/, "$1_F.png");

 

[crispybagel]

On 2/10/2020 at 4:31 PM, IAmAndre said:

That's a good idea. I have a clearer syntax though:

 

return filename + ( is_checked ? 'F' : '') + 'png'; // Haven't tested it though

Instead, if you want to go the regex route, the regex would be like

(^.+)\.png$

The parentheses allow you to capture the string, and you can then access it using $1. For example

str.replace(/(^.+)\.png$/, "$1_F.png");

 

Thanks, i'll definately test this!