Как заменить каждое выбранное изображение sr c другим изображением

Question

КОД:

function selectIcon(event) {

    $(event.currentTarget).toggleClass('selected');

    changeColor();
}

function changeColor() {

    var selectedIcon = $('.wrapper .feature.selected');

    var newIcon = selectedIcon.closest('.feature')
        .find('.feature-image img');
    newIcon.attr('src', newIcon.attr('src').replace('-old', ''));
}

Я хочу изменить выбранное изображение на другое, когда я щелкаю по нему.

Когда я нажимаю A-old.png, он будет заменен на A.png. Затем я нажимаю B-old.png, он будет заменен на B.png. (Выбраны оба A и B)

Но каким-то образом все изображения, которые я щелкнул, заменяются одним и тем же изображением.

Я нажимаю A-old.png, он заменяется на A.png. Затем я нажимаю B-old.png, он также заменяется на A.png.

update:

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

2. Я хочу иметь возможность отменить выбор значка, когда я снова щелкаю значок, изображение будет заменено с new.png на old.png.

Answer 1

Вы можете просто использовать функцию do all в функции one. Просто функция onclick, чтобы определить, какой img div вы щелкнули.

В функции onclick selectIcon - this относится к img, по которому мы щелкнули.

причина, по которой он не работал с вашим кодом, заключается в том, что вы указываете функции, на которую img заменить sr c of. Таким образом, функция была replacing всем, где присутствовало 150

Edit: Поскольку вы добавили дополнительную информацию об ожидаемом выходе, который вам нужен. Я воссоздал точный пример того, что вы хотите. Запустите приведенный ниже фрагмент, чтобы убедиться, что он работает. У меня также есть фон blur, чтобы показать, какое изображение выбрано и заменено onclick.

Я добавил фиктивное изображение src, когда вы нажимаете на него, оно будет заменено new большим изображением и если вы снова щелкните то же изображение bigger, оно вернется к изображению old. То же самое произойдет и с другими изображениями.

function selectIcon(_this) {
  //get clicked img
  var div = $(_this).closest('.feature')

  //find clicked element img
  var newIcon = div.find('.feature-image img');

  //Add selected
  if (!div.hasClass('selected')) {
    div.addClass('selected')
    div.css({
      'background': 'rgb(0 0 0 / 8%)'
    })
    newIcon.attr('src', newIcon.attr('src').replace('150', '170'));
  } else {
    div.removeClass('selected')
    div.css({
      'background': 'none'
    })
    //Replace -old src with -new of the clicked item
    newIcon.attr('src', newIcon.attr('src').replace('170', '150'));

  }

  //Show new src
  var newSrc = newIcon.attr('src')
  //console.log(newSrc)
}

Answer 2

вы переключаете код на выбранный div. как насчет другого, который был выбран. Я обновил код, в котором я сначала пытаюсь удалить все выбранные классы, прежде чем указывать c div был выбран.

здесь я удалил выбранный класс из всех div.

function selectIcon(event) {
 $('body').find('.selected').removeClass('selected');
 $(event.currentTarget).addClass('selected');
 changeColor(event.currentTarget);
}

function changeColor (event) {
var selectedIcon = $('.wrapper .feature.selected');
var newIcon = selectedIcon.find('.feature-image img');
newIcon.attr('src', newIcon.attr('src').replace('-old', ''));
}

для CSS в первой функции я удаляю все выбранные классы, которые будут ранее прикреплены к div. поэтому, когда в настоящее время нажимается один div, указанный c div будет иметь класс selected .

JS Fiddle: https://jsfiddle.net/thx9urbj/1/