切换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-荧光t.png。

当我再次点击它(one.png)时，它应该继续是一个荧光素。

但是如果我要点击two.png，那么one.png和two.png现在应该是双荧光。and应该回来了。

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

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

当图像单击时，函数从每个图像中删除每个-highlight，然后只将-hightlight添加到被单击的图像中。

我希望这对你有用。

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>

​

我只是修正了一个错误并更改了替换代码。希望这能帮上忙！