[英]How do I replace each selected image src with another image
CODE:代码:
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>
I want to change the selected image to another when I click it.当我单击它时,我想将所选图像更改为另一个。
When I click A-old.png, it will be replaced by A.png.当我单击 A-old.png 时,它将被 A.png 替换。 Then I click B-old.png, it will be replaced by B.png.
然后我点击 B-old.png,它将被 B.png 替换。 (A&B are both selected)
(A&B都被选中)
But somehow all images I clicked are replaced by the same image.但不知何故,我点击的所有图像都被相同的图像替换了。
I click A-old.png, it is replaced by A.png.我点击 A-old.png,它被 A.png 取代。 Then I click B-old.png, it is also replaced by A.png.
然后我点击B-old.png,它也被A.png替换了。
update:更新:
When the class is unselected, even though images are replaced by the new images, the color of the unselected image is dimmer than the currently selected image.当 class 未选择时,即使图像被新图像替换,未选择图像的颜色也会比当前选择的图像暗。
I want to be able to unselect the icon when I click the icon again, the image will be replaced from new.png to old.png.我希望再次单击图标时能够取消选择图标,图像将从new.png替换为old.png。
You cam simply use do everything in one
function.您
one
使用 function 即可完成所有操作。 Just the onclick
function to determine which img
div you have clicked on.只需
onclick
function 即可确定您单击了哪个img
div。
In the onclick function selectIcon
- this
refers the img we have clicked on.在 onclick function
selectIcon
- this
是指我们点击的img。
The reason it was not working with your code is that you are telling the function which img
to replace src of with.它不能与您的代码一起使用的原因是您告诉 function 用哪个
img
替换 src 。 So the function was replacing
everything where 150
was present所以 function 正在
replacing
存在150
的所有内容
Edit: As you have added more information on the expected output you wanted.编辑:正如您添加了有关您想要的预期 output 的更多信息。 I have recreated the exact example of what you want.
我已经重新创建了您想要的确切示例。 Run snippet below to see it working.
运行下面的代码片段以查看它的工作原理。 I have a
blur
background as well to show which image is selected and replaced onclick
.我也有一个
blur
背景,以显示选择并替换了哪个图像onclick
。
I have added dummy image src
when you click on it it will replaced by a new
bigger image and if you click the same bigger
image again it will revert back to old
image.我添加了虚拟图像
src
,当您单击它时,它将被new
的更大图像替换,如果您再次单击相同的bigger
图像,它将恢复为old
图像。 Same will happen for other images as well.其他图像也会发生同样的情况。
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>
you are toggling code on selected div.您正在切换所选 div 上的代码。 what about the other one which got selected.
另一个被选中的呢? I have updated code where I am first trying to remove all the selected classes before specific div got selected.
我已经更新了代码,我首先尝试在选择特定 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>
here I removed selected class from all the divs.在这里,我从所有 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', ''));
}
for CSS in the first function I am removing all the selected classes which will be attached to div previously.对于第一个 function 中的 CSS,我将删除之前将附加到 div 的所有选定类。 so when at present one div gets clicked that specific div will be having the class selected .
因此,当目前单击一个 div 时,该特定 div 将选择class 。
JS Fiddle: https://jsfiddle.net/thx9urbj/1/ JS小提琴: https://jsfiddle.net/thx9urbj/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.