Как по клику изменить часть адреса в атрибуте src?

Question

[furcifer]

Здравствуйте! Подскажите пожалуйста.
У меня есть n-ое количество картинок с классом b1 и атрибутом src="img/first/one/b1-X.png", где Х порядковый номер картинки, и два блока кнопок, допустим по 5 кнопок в каждом блоке. (у всех картинок в папках названия одинаковые)
По клику на кнопки первого блока должна меняться первая часть адреса "img/first/" на "img/second/" и тд
По клику на кнопки второго блока меняется соответственно вторая часть адреса "one/b1-X.png" .
Все должно быть циклично.
Дошел только до этого, но это не подходит.

$('button').click(function(){
    $( ".b1" ).each(function( index ) {
          $(this).attr('src', $(this).attr('src').replace('img/first/', 'img/second/'));
     });
});

Подскажите пожалуйста, что нужно написать?

Answer 1

[Никита Егоров]

Так?

Comments

[furcifer]

Никита Егоров все супер, только как применить это к атрибуту src, а не к тексту внутри блока.

const link = document.querySelector('.link');

document.querySelector('.wrapper').onclick = event => {
  const btn = event.target.closest('button');
  
  if (btn) {
    const text = link.src.innerHTML.split('/');
    text[text.length - 1 - +btn.parentNode.dataset.value] = btn.innerHTML.toLowerCase();
      
    link.innerHTML = text.join('/');
  }
}

Добавил .src но видимо не туда. И подскажите, как передавать в src не содержимое кнопки а допустим класс, который идентичен названию папки?
И оно работает только для одного блока, добавляю еще несколько дивов .link, обрабатывает только первый

[Никита Егоров]

furcifer, ну примерно так:
фидл

const link = document.querySelector('.link');

document.querySelector('.wrapper').onclick = event => {
  const btn = event.target.closest('button');
  
  if (btn) {
    const text = link.src.split('/');
    text[text.length - 1 - +btn.parentNode.dataset.value] = btn.className;
    
    link.src = text.join('/');
    console.log(link.src);
  }
}

[furcifer]

Никита Егоров, этот код просто переписывает адрес в src с такого вида что он имеет на полный адрес, ничего не заменяя(((((((

[Никита Егоров]

furcifer, разве?

[furcifer]

тогда что не так
html

<div class="product-slder__in">
	<div class="border-btn">
		<div class="selectboxss">
			<div class="selectboxssvalue"><span>Выбрать :</span></div>
			        <ul class="selectboxssmenu">
					<li class="selectoption border-alcantara">one</li>
					<li class="selectoption border-jakard" >two</li>
					<li class="selectoption border-tkanN">three</li>
					<li class="selectoption border-tkanT">four</li>
					
				</ul>
			</div>
	</div>
								
<div class="product-border">
	<div><div><img class="b1 b1-1" src="img/ch/1/alcantara/border/b1-1.png"></div></div>
	<div><div><img class="b1 b1-2" src="img/ch/1/alcantara/border/b1-2.png"></div></div>
...........

const link = document.querySelector('.b1');

	document.querySelector('.selectboxssmenu').onclick = event => {
	  const btn = event.target.closest('li.selectoption');
	  
	  if (btn) {
		const text = link.src.split('/');
		text[text.length - 1 - +btn.parentNode.dataset.value] = btn.className;
		
		link.src = text.join('/');
		console.log(link.src);
	  }
	}

было так

после клика

в полном адресе присутствуют русские слова, может в этом проблема? хотя перенос в горень не помог

[Никита Егоров]

furcifer,

<div class="selectboxssvalue"><span>Выбрать :</span></div>
              <ul class="selectboxssmenu" data-value="2">
          <li class="selectoption border-alcantara">one</li>
          <li class="selectoption border-jakard" >two</li>
          <li class="selectoption border-tkanN">three</li>
          <li class="selectoption border-tkanT">four</li>
          
        </ul>
      </div>

А для другого блока - data-value="1"

[furcifer]

Никита Егоров, да, затупил. а еще... почему срабатывает только для одной картинки? адрес меняется только у первой, у остальных остается тот же

[Никита Егоров]

furcifer, нужно перебрать все нужные вам картинки и поменять им адреса аналогично - фидл

const links = document.querySelectorAll('.link');

document.querySelector('.wrapper').onclick = event => {
  const btn = event.target.closest('button');
  
  if (btn) {
    [...links].forEach(link => {
      const text = link.getAttribute('src').split('/');
      text[text.length - 1 - +btn.parentNode.dataset.value] = btn.className;

      link.src = text.join('/');
      console.log(link.src);
    })
  }
}

И тут я подправил, то что в src идет абсолютный путь, теперь все окей.

[furcifer]

Никита Егоров, просто великолепно!!!! Спасибо огромное!!!!

[furcifer]

Никита Егоров можно пригласить Вас в другой пост?)
Переключение адреса в атрибуте src при переключении slick слайдов?