切换语句javascript图像和文本

时间:2017-08-28 23:52:30

标签: javascript html

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

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;