Jquery - замена параметров в img теге

378

13 июля 2017, 01:08

Всем привет.

Есть HTML код:

<h3 class="title"><a href="http://www.site.com/bla0">Title Test</a></h3>
<img width="550" height="550" src="http://www.site.com/images/image_test1-550x550.jpg" alt="Test Imgage 1" />
<h3 class="title"><a href="http://www.site.com/bla1">Title Test</a></h3>
<img width="550" height="550" src="http://www.site.com/images/image_test2-550x550.jpg" alt="Test Imgage 2" />

Задача. Нужно при загрузке страницы, заменить в теге src текст 550x550 на 300x200 Далее нужно заменить ширину и высоту на 300 и 200

Результат должен быть такой:

<h3 class="title"><a href="http://www.site.com/bla0">Title Test</a></h3>
<img width="300" height="200" src="http://www.site.com/images/image_test1-300x200.jpg" alt="Test Imgage 1" />

Как я понимаю логика должна быть такова, мы находи класс title, потом ищем следующим за ним элемент img, находим его src и делаем замену. Но как все это сделать при загрузке странице ? максимум что мне удалось сделать, это вот это

$('title').next().each(function() {
var test = $(this).find('img').attr('src').replace("550x550","300x200");
alert(test);
});

Но как я понимаю евент должен отправлятся первей чем загрузится страница, что бы изображения уже подгружались с 300x200 даже ставил вместо var test, return, все равно не заменяет, вот тут не пойму почему (я только начал изучать js) очень интересно, но некоторые моменты не очень понятны.

Так же хотел бы знать нет ли у данного метода каких то подводных камней ? при работе с браузерами ?

Спасибо

Answer 1

Можно искать, используя соседние селекторы.
Можно менять несколько атрибутов сразу.
Чтобы обойтись без метода .each(), можно вычислять новые значения атрибутов колбэк-функцией. (Спасибо @Grundy за науку.)
Чтобы охватить несколько классов, добавьте селекторы с ними через запятую.

$(document).ready(function() { 
  $( '.title1+img,.title2+img,.title3+img' ).attr({ 
    src: function( i, val ) { 
      return val.replace('550x550','300x200'); 
    }, 
    width: 300, 
    height: 200 
  }); 
});

<h3 class="title1"><a href="http://www.site.com/bla1">Title 1</a></h3> 
<img width="550" height="550" src="//placehold.it/550x550/936/fff/" alt="Image 1" /> 
 
<h3 class="title2"><a href="http://www.site.com/bla2">Title 2</a></h3> 
<img width="550" height="550" src="//placehold.it/550x550/693/fff/" alt="Image 2" /> 
 
<h3 class="title3"><a href="http://www.site.com/bla3">Title 3</a></h3> 
<img width="550" height="550" src="//placehold.it/550x550/369/fff/" alt="Image 3" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

Надо запускать при событии ready. В этот момент структура DOM уже сформирована, но еще никакие изображения не загружены.

Функция .replace заменяет текст в строке, но не в атрибутах. Надо получить сначала атрибут src в строку, преобразовать ее, а потом записать назад, указав вторым аргументом в .attr().

$(document).ready(function() {
  $('.title').next().each(function() {
    var src = $(this).find('img').attr('src');
    src = src.replace("550x550","300x200");
    $(this).find('img').attr('src', src);
  });
});