Javascript 替换下划线后的文本

Question

我正在尝试替换文件名中下划线后的一些文本。

示例文件名：FileName_true.png。我需要把它改成FileName_false.png。

基本上，我有一个图像，当您单击它时我想更改它。 （颜色为黑白，反之亦然）。我考虑过在 JQuery 中使用切换，但我不确定是否可以使用 5 张图像而不重复代码 5 次。

我的想法是创建一个函数，该函数使用正则表达式来捕获您单击的图像文件名中的“真”或“假”，并将其替换为备用。

你对完成这个有什么想法？如果可能，我希望在 PHP 中完成此操作，但如果不是，则使用 JavaScript/JQuery。谢谢你的帮助！如果您有任何问题，请告诉我。

Answer 1

filename = filename.replace('_true','_false');

jQuery 和正则表达式都不需要

<img src="FileName_true.png"
onclick="this.src=(this.src.indexOf('_true')!=-1)?this.src.replace('true','false'):this.src.replace('false','true')" />

这是我在这么晚的时候能想到的

在 php 中这样做很愚蠢，需要一个 cookie

Answer 2

mplungjan 的回答很好，但让我提出一些替代方案。图像交换最好使用sprite 完成，这样图像之间的切换就不会出现任何延迟。将图像的两个版本并排放在一个文件中。将该图像设置为 div 的背景，并调整背景位置以显示一个或另一个图像。

假设“pic1_bw_color_sprite.png”是一个 75x75 的彩色图像，其下方是一个 75x75 的黑白图像，使最终图像宽 75 像素，高 150 像素。像这样设置你的CSS：

#pic1
{
    background-image: url(pic1_bw_color_sprite.png);
    height: 75px;
    width: 75px;
}
#pic1.bw
{
    background-position: 0px -75px;
}

然后用一些简单的 jQuery 来完成所有工作：

$("#pic1").click(function()
{
    $(this).toggleClass("bw");
});

在这里试试：http://jsfiddle.net/gilly3/B7esz/

就重复代码而言，这是 jQuery 非常擅长避免的一件事。只需使用包含需要该行为的每个类的选择器：

$("#pic1,#pic2,#pic3,#pic4").click(...);
// or
$(".bwSwap").click(...);

要将当前状态存储在表单中以便更新数据库，您需要获取对表单元素的引用，然后设置 value 属性（或 jQuery 中的 .val()）。

$("#pic1").click(function()
{
    $(this).toggleClass("bw");
    $("#pic1isBW").val($(this).hasClass("bw"));
});