使用javascript / jquery，更新设置图像的src的最佳方法是什么？

Question

I have a bunch of images on a page that look like this:

<img src="/Content/Images/Icons/Theme1/title.png" class="slideExampleImage">
<img src="/Content/Images/Icons/Theme1/test.png" class="slideExampleImage">
<img src="/Content/Images/Icons/Theme1/bill.png" class="slideExampleImage">

As you can see, all of the images have class="slideExampleImage" and all of the files are in a directory with the name of the current theme.

I have a folder for different themes and I want to allow my users to change the theme so I have radio buttons with each theme name so you can assume i can get the selected theme name into a local variable

var theme = GetThemeNameFromRadioButton();

am trying to figure out the best way to allow the user to select a different theme (lets say "Theme2") and that will result in the images looking like this

I have different themes and I want a way to change the theme

<img src="/Content/Images/Icons/Theme2/title.png" class="slideExampleImage">
<img src="/Content/Images/Icons/Theme2/test.png" class="slideExampleImage">
<img src="/Content/Images/Icons/Theme2/bill.png" class="slideExampleImage">

so somehow go in and update the src and replace the one subfolder under the images (Theme1 in this case) with the new theme picked (Theme2 in this case)

What is a way to achieve that using jquery / javascript? NOTE that I don't have any control over the theme name as users can same a theme as any name

Answer 1

function changeTheme(newTheme) {
  // change the "src" attribute
  $(".slideExampleImage").attr("src", function(_, oldSrc) {
    // split the path
    var parts = oldSrc.split(/\//);
    // replace the "theme" part of the path with the new one
    parts.splice(parts.length - 2, 1, newTheme);
    // return/set the new path
    return parts.join("/");
  });
}

fiddle