Javascript替换下划线后的文本

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

基本上，我有一个图像，当你点击它时，我想改变它。（颜色到黑色和白色，反之亦然）。我想过在JQuery中使用切换，但我不确定是否可以像5个图像一样执行操作，而无需重复代码5次。

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

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

2011-04-10 RyanPitts

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

来源

2011-04-10 20:21:52 mplungjan

非常感谢...我会试试看。现在，是否有办法将新文件名存储在变量或隐藏输入中，以便我可以将它传递给表单。该图像是在一个窗体中，文件名从数据库中获取（通过PHP），我希望能够在提交表单时将新的当前文件名状态保存在数据库中。 – RyanPitts 2011-04-10 20:32:25

@RyanPitts，嘿，你有没有想过要支付专业？ – sln 2011-04-11 04:04:10

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

假设“pic1_bw_color_sprite.png”是一个75x75的彩色图像，其下方有一个75x75的黑白图像，使得最终图像宽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"); 
});

尝试在这里：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")); 
});

来源

2011-04-10 21:13:29 gilly3

太好了，谢谢！听起来这可能是一个更好的选择。尽管我将文件名存储在数据库中，以便稍后可以引用它。关于如何将新文件名保存到数据库的问题，你对mplungjan的回答有何看法？ – RyanPitts 2011-04-10 21:46:21

@Ryan - 要获得表单中的值，只需填充元素的'value'属性即可。我在答案中添加了一个示例。 – gilly3 2011-04-10 22:05:30

为精灵+1。我必须记住这一点。由于您必须更改所有想要切换为精灵的图像，因此开始时需要做更多的工作。 – mplungjan 2011-04-11 06:02:18

Javascript替换下划线后的文本

回答

相关问题