切换img src文件路径

Question

我有以下代码：

<div class="flex-gametypes">
<div><img src="assets/images/game/one.png"></div>
<div><img src="assets/images/game/two.png"></div>
</div>

我有以下图像文件：

assets/images/game/one.png
assets/images/game/two.png
assets/images/game/one-highlight.png
assets/images/game/two-highlight.png

我想做的事：

当我点击one.png时，代码必须将文件重命名为one-hight.png.

当我再次点击它(one.png(时，它应该继续是one-hight.png.

但如果我点击two.png，那么一个highlight.png应该会恢复为one.png，two.png现在应该是two-hight.png

所以，这就是我尝试过的：(我从这个问题中得到了一些帮助(。

$(document).ready(function(){
$(".flex-gametypes img").click(function(){
$(this).attr('src', $(this).attr('src').replace('-hightlight.png') + '');
$(this).attr('src', $(this).attr('src').replace(/.png/, '') + '-highlight.png');
});
});

但这并没有显示出想要的结果。那么我怎样才能达到这种效果呢？

Answer 1

在我的示例中，我使用了indexOf()。现在它按照你想要的方式工作。通过拨动原理。

$(".flex-gametypes img").each(function() {
$(this).click(function() {
if ($(this).attr('src').indexOf('-highlight.png') != -1) {
$(this).attr('src', $(this).attr('src').replace(/-highlight.png/, '') + '.png') 
} else {
$(this).attr('src', $(this).attr('src').replace(/.png/, '') + '-highlight.png')
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-gametypes">
<div><img src="assets/images/game/one.png"></div>
<div><img src="assets/images/game/two.png"></div>
<div><img src="assets/images/game/one-highlight.png"></div>
<div><img src="assets/images/game/two-highlight.png"></div>
</div>

Answer 2

试试这个

$(document).ready(function(){
$(".flex-gametypes div img").click(function(){
$(".flex-gametypes div img").each(function(){
$(this).attr('src', $(this).attr('src').replace('-highlight', ''));
});
$(this).attr('src', $(this).attr('src').replace(/.png/, '') + '-highlight.png');

});
});

当一个图像被点击时，函数会从每个图像中删除每个高光，然后只在被点击的图像中添加高光。

我希望这对你有用。

Answer 3

尝试用以下内容替换jQuery：

$(document).ready(function(){
$(".flex-gametypes img").click(function(){
$(".flex-gametypes img").each(function(){
$(this).attr('src', $(this).attr('src').replace('-highlight.png', '.png'));
});
$(this).attr('src', $(this).attr('src').replace('.png', '-highlight.png'));

});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-gametypes">
<div><img src="assets/images/game/one.png"></div>
<div><img src="assets/images/game/two.png"></div>
</div>

我刚刚修复了一个拼写错误，并更改了替换代码。希望这能有所帮助！

Answer 4

首先，它会将所有突出显示的图像更改为正常，然后突出显示单击的当前图像，希望这有助于

$(document).ready(function() {
$(".flex-gametypes img").on('click',function() {
$(".flex-gametypes img").each(function(i,obj){
$(obj).attr('src', $(obj).attr('src').replace('-highlight.png', '.png'));
})
$(this).attr('src', $(this).attr('src').replace('.png', '-highlight.png'));
});});