Форум

shaltay · #1 (**permalink**) 07.06.2011, 14:38

Доброго времени. По нажатии на картинку, она должна поменяться. Точнее, должен смениться ее src.

Как это правильнее сделать в jquery?
В js есть replace(), а в jquery я его не нашел. Только replaceWith или replaceAll. Что можете посоветовать?

Нужно: images/img1.png поменять на images/imgh2.png

shaltay · #2 (**permalink**) 07.06.2011, 14:50

Пробовал

$(this).attr('src').replace(/img/, 'imgh');
$(this).attr('src').replace('img', 'imgh');

Ничего не работает..

Kolyaj · #3 (**permalink**) 07.06.2011, 14:56

this.src = 'images/imgh2.png';

shaltay · #4 (**permalink**) 07.06.2011, 14:59

Сообщение от Kolyaj

this.src = 'images/imgh2.png';

Это конечно понятно. Но у меня 40 картинок и src у всех разные. Надо заменить именно одну часть только.

shaltay · #5 (**permalink**) 07.06.2011, 15:05

Все, разобрался сам, спасибо. Надо было в переменную загнать значение.

shaltay · #6 (**permalink**) 07.06.2011, 15:13

Ну вот теперь более сложная задача. При нажатии на картинку, она должна меняться. Но при нажатии на другую картинку, предыдущая должна стать оригинальной. Стандартный эффект переключения кнопок.
Можно сделать через siblings(), но боюсь, что комп будет считать очень долго. Нет никаких решений с "предыдущей" картинкой или как-то еще?

walik · #7 (**permalink**) 07.06.2011, 16:50

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(function() {
   $('img').click(function() {
      var precedent = $('img.current');
      precedent.attr('src', precedent.attr('original'));
      precedent.removeClass('current');
      $(this).addClass('current').attr('original', $(this).attr('src')).attr('src', 'http://javascript.ru/forum/images/smilies/laugh.gif');
   });
});
</script>
<style>
img {
   cursor: pointer;margin-right: 20px;
}
</style>
</head>
<body>
<img src="http://javascript.ru/forum/images/smilies/smile.gif" />
<img src="http://javascript.ru/forum/images/smilies/unsure.gif" />
<img src="http://javascript.ru/forum/images/smilies/tongue.gif" />
<img src="http://javascript.ru/forum/images/smilies/agree.gif" />
<img src="http://javascript.ru/forum/images/smilies/dance3.gif" />
</body>
</html>

shaltay · #8 (**permalink**) 07.06.2011, 17:06

Walik, спасибо! Но опять не то. Нужно каждой картинке делать при нажатии уникальную вторую картинку. Т.е. общее колво картинок all*2

Сделал так. Картинки были pay_doX.png и pay_dolX.png

$(paySystemId+' img').click( function() {
   $(paySystemId+' img').each(function () {
      var hoverImg = $(this).attr('src').replace(/pay_dol/g, 'pay_do');
      $(this).attr('src',hoverImg);
   });
   var hoverImgThis = $(this).attr('src').replace(/pay_do/g, 'pay_dol');
   $(this).attr('src',hoverImgThis);
});

Везде кроме оперы более менее сносно работает. В опере подтормаживает. Там 40 картинок. Но как сделать проще - не придумал.

walik · #9 (**permalink**) 07.06.2011, 17:42

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(function() {
   $('img').click(function() {
      var precedent = $('img.current');
      precedent.attr('src', precedent.attr('original'));
      precedent.removeClass('current');
      $(this).addClass('current').attr('original', $(this).attr('src')).attr('src', $(this).attr('hover'));
   });
});
</script>
<style>
img {
   cursor: pointer;margin-right: 20px;
}
</style>
</head>
<body>
<img src="http://javascript.ru/forum/images/smilies/smile.gif" hover="http://javascript.ru/forum/images/smilies/sad.gif" />
<img src="http://javascript.ru/forum/images/smilies/unsure.gif" hover="http://javascript.ru/forum/images/smilies/thank_you2.gif" />
<img src="http://javascript.ru/forum/images/smilies/tongue.gif" hover="http://javascript.ru/forum/images/smilies/wink.gif" />
<img src="http://javascript.ru/forum/images/smilies/agree.gif" hover="http://javascript.ru/forum/images/smilies/yes4.gif" />
<img src="http://javascript.ru/forum/images/smilies/dance3.gif" hover="http://javascript.ru/forum/images/smilies/mad.gif" />
</body>
</html>

shaltay · #10 (**permalink**) 07.06.2011, 18:36

Спасибо Большое!
Скажите, что значит var precedent = $('img.current'); ?

Форум

Справочник

Discord чат

Курсы javascript