使用jQuery或Vanilla JavaScript在文本和文件类型之间插入<img>源中的文本
使用jQuery或Vanilla JavaScript在文本和文件类型之间插入<img>源中的文本
提问于 2018-06-16 06:31:05
我有一些图像元素，当用户单击按钮时，我想向其中添加额外的文本。
<img class="torso" src="img/girl/body/girl001.png" alt="">
<img class="eyebrows" src="img/eyebrows/black.png" alt="">
<img class="face face1" src="img/face/head1_1.png" alt="">
<button>Tilt Images</button>文本将需要添加到".png“之前，并且最终将如下所示：
<img class="torso" src="img/girl/body/girl001-tilt.png" alt="">
<img class="eyebrows" src="img/eyebrows/black-tilt.png" alt="">
<img class="face face1" src="img/face/head1_1-tilt.png" alt="">
<button>Untilt Images</button>在.png文件类型之前将"-tilt“添加到图像源名称中，有效地将图像与"-tilt”版本互换。然而，所有的图像名称在长度上都不同，我认为如果我以某种方式在attr()；上对".png“使用.find()；，并使用prepend()；添加"-tilt”字符串，它就会起作用……我一直在绞尽脑汁想如何做到这一点。任何帮助/知识都是非常感谢的！
回答 1
Stack Overflow用户
发布于 2018-06-16 06:40:26
您可以创建一个简单的切换按钮来在图像的-tilt和untitlt版本之间切换。要更改src，只需使用String.replace()重新分配它即可
document.getElementById('toggle').addEventListener('click', e => {
let t = e.target.innerText;
e.target.innerText = t === 'untilt images' ? 'tilt images' : 'untilt images'
document.querySelectorAll('#images > img').forEach(img => {
img.src = img.src.replace(/(\-tilt)?\.(png|jpg|jpeg)$/, (_, tilt, type) =>
tilt ? '.' + type : '-tilt.' + type
);
console.log(img.src);
});
})<div id="images">
<img class="torso" src="img/girl/body/girl001.png" alt="">
<img class="eyebrows" src="img/eyebrows/black.png" alt="">
<img class="face face1" src="img/face/head1_1.png" alt="">
</div>
<button id="toggle">tilt Images</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50883398
复制相关文章
相似问题