Блог

Главная - Вопросы по программированию - jQuery attr(). Изменение источника для блока изображений и расширения

jQuery attr(). Изменение источника для блока изображений и расширения

#javascript #jquery #image #attr

#javascript #jquery ( jquery ) #изображение #attr

Вопрос:

Я извлекаю несколько изображений из API и меняю их на свои собственные изображения следующим образом:

 $('img[src="http://www.example.com/dir/images/dir/1.gif"]').attr('src', "http://cdn.example.com/dir/1.gif");
$('img[src="http://www.example.com/dir/images/dir/2.gif"]').attr('src', "http://cdn.example.com/dir/2.gif");
$('img[src="http://www.example.com/dir/images/dir/3.gif"]').attr('src', "http://cdn.example.com/dir/3.gif");
$('img[src="http://www.example.com/dir/images/dir/4.gif"]').attr('src', "http://cdn.example.com/dir/4.gif");
$('img[src="http://www.example.com/dir/images/dir/5.gif"]').attr('src', "http://cdn.example.com/dir/5.gif");
$('img[src="http://www.example.com/dir/images/dir/6.gif"]').attr('src', "http://cdn.example.com/dir/6.gif");
$('img[src="http://www.example.com/dir/images/dir/7.gif"]').attr('src', "http://cdn.example.com/dir/7.gif");
$('img[src="http://www.example.com/dir/images/dir/8.gif"]').attr('src', "http://cdn.example.com/dir/8.gif");
$('img[src="http://www.example.com/dir/images/dir/9.gif"]').attr('src', "http://cdn.example.com/dir/9.gif");
$('img[src="http://www.example.com/dir/images/dir/10.gif"]').attr('src', "http://cdn.example.com/dir/10.gif")

Теперь, поскольку текста слишком много, я сжал его следующим образом:

 $('img[src^="http://www.example.com/"]').each(function(index,element){
  var $this, src, newSrc;
  $this = $(this);
  src = $this.attr('src');
  newSrc = src.replace('www.example.com/dir/images/dir', 'cdn.example.com/dir');
  $this.attr('src', newSrc);
});

Теперь я хочу изменить расширение своих изображений на .png . Поэтому в основном я хочу заменить URL-адрес для каждого изображения И расширение с .gif на .png .

Как я могу этого добиться?

Комментарии:

1. jsfiddle.net/ZHUWD Решения, предоставленные либо Дарином, либо Тобиасом, работают нормально. Вы должны включить остальную часть вашего кода, которая окружает этот фрагмент выше. Существует большая вероятность, что вы столкнулись с проблемами определения масштаба.

2. @rkw Спасибо. Вы были правы

Ответ №1:

Как насчет:

 $('img[src^="http://www.example.com/"]').each(function(i, value) {
    $(this).attr('src', $(this).attr('src').replace('www.example.com/dir/images/dir', 'cdn.example.com/dir').replace('.gif', '.png'));
});

Ответ №2:

 $('img[src^="http://www.example.com/"]').attr('src', function() {
    return this.src
               .replace('www.example.com/dir/images/dir', 'cdn.example.com/dir')
               .replace('.gif', '.png');
});

Комментарии:

1. Он анализирует исходные изображения

2. Извините, в коде были другие проблемы, из-за которых это не сработало. Большое спасибо

Ответ №3:

 newSrc.replace(".gif",".png");

Думаю, это поможет 🙂

Комментарии:

1. Что вы сделали? newSrc = newSrc.replace(«.gif»,».png»); ? Это должно сработать.

Метки: