下划线后用Javascript替换文本

Question

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

文件名示例： FileName_true.png 。 我需要将其更改为FileName_false.png 。

基本上，我单击后要更改图像。 （颜色为黑白，反之亦然）。 我考虑过在JQuery中使用切换功能，但是我不确定是否可以在不重复5次代码的情况下使用5张图片来完成此操作。

我的想法是创建一个使用正则表达式的函数，以捕获单击的图像的文件名中的“ true”或“ false”，然后将其替换为替代字符。

您对此有何想法？ 如果可能，我希望在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 b / w图像，则最终图像的宽度为75px，高度为150px。 像这样设置您的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");
});

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

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

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

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