Question

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

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

基本上，当我点击它时，我想要更改一个图像。（颜色为黑白，反之亦然）。我想过在JQuery中使用切换但是我不确定我能用5张图像来做，而不会重复5次代码。

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

您对完成此操作有何看法？如果可能的话，我希望用PHP完成，但如果没有，那么JavaScript / JQuery。谢谢你的帮助！如果您有任何问题，请告诉我。

Answer 1

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

jQuery和regexp都不是必需的

<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(...);

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

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