LOVETOO-前端编程程序员

JavaScript:改变 HTML 图像,来回变换

2018-02-20  本文已影响8人  车文烨

在正常情况下,连续点击是来回变换的,但是有一种情况会发生错误或者说只变化一次:
原因:检索图片链接字段的c.src.match('a')里面的a不可以只是一个阿拉伯数字(可以数字和字母组合(第一个是数字的组合也可以))!

正常:
html:
<img src="./images/2018-a.jpg" id="tupian" onclick="changeImg()">

js:
function changeImg(){
c=document.getElementById("tupian");
if (c.src.match('b')) {
c.src="./images/2018-a.jpg";
}
else{
c.src="./images/2018-b.jpg";
}
}

发生错误或者只变化一次:
html:
<img src="./images/2018-1.jpg" id="tupian" onclick="changeImg()">

js:(发生错误)
function changeImg(){
c=document.getElementById("tupian");
if (c.src.match('2')) {
c.src="./images/2018-1.jpg";
}
else{
c.src="./images/2018-2.jpg";
}
}

js:(只变化一次)
function changeImg(){
c=document.getElementById("tupian");
if (c.src.match('1')) {
c.src="./images/2018-2.jpg";
}
else{
c.src="./images/2018-1.jpg";
}
}

测试地址:http://cuanyair.com/js-test/

上一篇 下一篇

猜你喜欢

热点阅读