如何用另一个图像替换每个选定的图像 src

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', '')); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="wrapper"> <div class="feature" onclick="selectIcon(event)"> <div class="feature-image"> <img src="img/A-old.png"/> </div> </div> <div class="feature" onclick="selectIcon(event)"> <div class="feature-image"> <img src="img/B-old.png"/> </div> </div> <div class="feature selected" onclick="selectIcon(event)"> <div class="feature-image"> <img src="img/C-old.png"/> </div> </div> </div>

当我单击它时，我想将所选图像更改为另一个。

当我单击 A-old.png 时，它将被 A.png 替换。 然后我点击 B-old.png，它将被 B.png 替换。 （A&B都被选中）

但不知何故，我点击的所有图像都被相同的图像替换了。

我点击 A-old.png，它被 A.png 取代。 然后我点击B-old.png，它也被A.png替换了。

更新：

1. 当 class 未选择时，即使图像被新图像替换，未选择图像的颜色也会比当前选择的图像暗。

2. 我希望再次单击图标时能够取消选择图标，图像将从new.png替换为old.png。

Answer 1

您one使用 function 即可完成所有操作。 只需onclick function 即可确定您单击了哪个img div。

在 onclick function selectIcon - this是指我们点击的img。

它不能与您的代码一起使用的原因是您告诉 function 用哪个img替换 src 。 所以 function 正在replacing存在150的所有内容

编辑：正如您添加了有关您想要的预期 output 的更多信息。 我已经重新创建了您想要的确切示例。 运行下面的代码片段以查看它的工作原理。 我也有一个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) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <div class="feature" onclick="selectIcon(this)"> <div class="feature-image"> <img src="https://via.placeholder.com/150" /> </div> </div> <div class="feature" onclick="selectIcon(this)"> <div class="feature-image"> <img src="https://via.placeholder.com/150" /> </div> </div> <div class="feature" onclick="selectIcon(this)"> <div class="feature-image"> <img src="https://via.placeholder.com/150" /> </div> </div> </div>

Answer 2

您正在切换所选 div 上的代码。 另一个被选中的呢？ 我已经更新了代码，我首先尝试在选择特定 div 之前删除所有选定的类。

<div class="wrapper">
  <div class="feature" onclick="selectIcon(event)">
   <div class="feature-image">
    <img width="20"  src="https://i0.wp.com/theturf.com.au/wp-content/uploads/2016/05/placeholder-old.png" />
   </div>
  </div>

  <div class="feature" onclick="selectIcon(event)">
   <div class="feature-image">
    <img width="40" src="https://designshack.net/wp-content/uploads/placeholder-image-old.png" />
   </div>
  </div>

  <div class="feature" onclick="selectIcon(event)">
   <div class="feature-image">
    <img width="40" src="https://complianz.io/wp-content/uploads/2019/03/placeholder-300x202-old.jpg" />
   </div>
  </div>
</div>

在这里，我从所有 div 中删除了选定的 class。

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', ''));
}

对于第一个 function 中的 CSS，我将删除之前将附加到 div 的所有选定类。 因此，当目前单击一个 div 时，该特定 div 将选择class 。

JS小提琴： https://jsfiddle.net/thx9urbj/1/