解析img src属性

Question

我正在使用jQuery在点击上显示图像。这可以通过将图像的源存储到这样的变量中来正常工作。

var theSrc = $(event.target).attr('src');

然后我可以将此图像放入div中并显示它

var theImg = '<div class="wrap"><img src="'+imgSrc+'"></div>';

我想做的是，只需将图像的来源略微改为同一目录中较大的文件，即将“Big”附加到名称上

image.png

到

imageBig.png

这可以使用jQuery吗？

Answer 1

您可以执行以下操作：

var theSrc = $(event.target).attr('src');
theSrc = theSrc.split(".")[0] + "Big." + thetheSrc.split(".")[1];

Answer 2

我会使用.replace() - 这比.split()更简单：

var theSrc = $(event.target).attr('src').replace( '.png', 'Big.png' );

还有一个建议：我会从你的变量名中消除the之类的干扰词。而不是theSrc，请使用src。而不是theImg，请使用img。单词the根本不会传达任何内容，并且在变量名中没有任何价值。它实际上有负值，因为它是额外的东西，不会给更简单的名称增加任何意义。

Answer 3

不确定

$("img").attr("src", "imageBig.png");

请参阅JQuery文档：http://api.jquery.com/attr/#attr2您可以使用多种类型的attr。

要动态执行此操作，请参阅@ tymeJV的帖子，只要文件名中只有一个句点，该帖子就会有效。

Answer 4

不是使用jQuery，但你可以使用Javascript：

var temp = imgSrc.split('.');
var newSrc = temp[0]+'Big.'+temp[1];