Question

编辑：当我发布此代码并为网站格式化时，它变为只是始终只显示“这是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" />

Answer 1

由于变量textOO1和image1不存在，image2似乎永远不会被设置。您的switch语句中没有任何案例被调用。

Answer 2

您需要将案例陈述修改为：

case "image1"和case "image2" - 请记住，它们是字符串。你将它们用作变量。

Answer 3

在diffImage中，您刚刚更改了src而非id，但在changeStyle中您试图通过id找到图片，因此{{1}永远是pic，因此文本不会改变。

＆＃13;

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;

切换语句javascript图像和文本

3 个答案: