найти и заменить часть пути к файлу для «ЦСИ» атрибут

Question

Предполагая, что у меня есть тема переключателя, и вы несколько изображений/Иконки

<img src="images/icons/icon-1.png"> 
<img src="images/icons/icon-2.png"> 
<img src="images/icons/icon-3.png"> 
<img src="images/icons/icon-4.png"> 

А также у меня есть еще один набор этих иконок с другим цветом/путь

<img src="images/icons/blue/icon-1.png"> 
<img src="images/icons/blue/icon-2.png"> 
<img src="images/icons/blue/icon-3.png"> 
<img src="images/icons/blue/icon-4.png"> 

ниже JQuery код прекрасно работает, когда я нажимаю, чтобы изменить цвет темы для 'когда'

$('img').attr('src', $('img').attr('src').replace('images/icons', 'images/icons/blue')); 

Если я снова нажал, чтобы выбрать другой цвет, говорят, «красный», путь стать как этот

<img src="images/icons/red/blue/icon-1.png"> 

в то время как это должно быть, как это

<img src="images/icons/red/icon-1.png"> 

как я могу сделать «заменить метод», чтобы найти & перезаписать старый путь без изменения имени файла «icon-1.png», например, так как это динамические значки.

Заранее спасибо.

Answer 1

Это имя всегда одно и то же? в этом случае вы можете использовать следующий код:

$('img').attr('src', function(i, src){ 
    return 'images/icons/blue/' + src.split("/").pop() 
}); 

Answer 2

Вам необходимо установить петлю и заменить src каждого элемента.

$('img').attr('src', function(i, src){ 
    return src.replace('images/icons', 'images/icons/blue') 
}); 

При использовании версии добытчика .attr() он возвращает значение атрибута первого элемента согласованного набора элементов, так же значение будет получить набор для всех элементов.

Answer 3

Просто сначала введите имя файла, затем перепишите весь источник. Предполагая, что вы отправляете как «тему» ​​для функции changeTheme, что-то из следующих значений: «изображения/значки», «изображения/значки/синий», «изображения/значки/красный» и т. Д., Это будет делать трюк.

function changeTheme(theme) { 
var img=$(img); 
var filename=img.attr('src').split('/'); 
filename=filename[filename.length-1]; 
img.attr('src',theme+"/"+filename); 
} 

Или, если вы не Minde хранения имени файла в качестве атрибута данных к изображению, вы можете изменить вторую и третью строку функций, с чем-то вдоль линий:

var filename=img.data("filename"); //assuming you are storing the file name in data-filename attribute