编辑:当我发布此代码并为网站格式化时,它变为只是始终只显示“这是image1的文本”,但不按照我的意图工作。
我有1张照片。 我有一个功能可以在两个图像之间更改图像。
我只是希望图片的底部有与图片对应的文字。 函数diffImage工作正常。 函数changeStyle不是.. 它目前说:未定义为文本。
实施例 PIC1 1.jpg的文字
function diffImage(img) {
if (img.src.match("1.jpg")) img.src = "2.jpg";
else img.src = "1.jpg";
}
function changeStyle() {
var text001;
var pic = document.getElementById("image1");
switch (pic) {
case image1:
text001 = "this is the text for image1 ";
break;
case image2:
text001 = " this is the text for image2";
break;
}
document.getElementById("imgMessage").innerHTML = text001;
}
<img src="1.jpg" id="image1" onclick=diffImage(this) class="image1" />
<p id="imgMessage"></p>
<button onclick="changeStyle()"> Change</button>
<img src="2.jpg" id="image2" style="display:none" />
答案 0 :(得分:0)
由于变量textOO1
和image1
不存在,image2
似乎永远不会被设置。您的switch语句中没有任何案例被调用。
答案 1 :(得分:0)
您需要将案例陈述修改为:
case "image1"
和case "image2"
- 请记住,它们是字符串。你将它们用作变量。
答案 2 :(得分:0)
在diffImage
中,您刚刚更改了src
而非id
,但在changeStyle
中您试图通过id
找到图片,因此{{1}永远是pic
,因此文本不会改变。
image1
&#13;
function diffImage(img){
if(img.id.match("image1")) {
document.getElementById("image1").style ="display: none";
document.getElementById("image2").style ="display: block";
} else {
document.getElementById("image1").style ="display: block";
document.getElementById("image2").style ="display: none";
}
}
function changeStyle(){
var text001;
var pic =document.getElementById("image1").style.display;
switch(pic){
case "block":
text001 = "this is the text for image1 ";
break;
case "none":
text001 = " this is the text for image2";
break;
}
document.getElementById("imgMessage").innerHTML = text001;
}
&#13;