Question

我尝试使用java脚本..当我点击A字母时，我无法看到图像。我对java脚本很新。任何帮助表示赞赏。

    function iterateAlphabet(var index)
{
        var nextChar;
        var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
            for(var index=0; index<str.length; index++)
            {
                nextChar = str.charAt(index);
                break;
            }
        return nextChar;
    }

    function getCharacter(var index)
        var  character = document.getElementById("alphabetA");
        character.innerText=iterateAlphabet(index);
}
    </script>
</head>

<body>
    <table>
        <tr>
        <td><input type="image" src="imgs\\1.jpg" alt="a"  id="alphabetA"  onclick ="iterateAlphabet('0')" value="Apple"></input></td>
    </table>

Answer 1

尝试此功能

（函数iterateAlphabet（）{

 var alpha = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(''),
     imageUrl = "http://dummyimage.com/50x50/2e2e2e/fff&text=";

alpha.forEach( function(el){
  var link = document.createElement('A');
      link.href = imageUrl + el;
      link.innerHTML = el;

   // console.log(link); 

    document.write(link); // you can use any code here to show the links

 });

}）（）

Answer 2

HTML结构（根据需要设置样式，只保留元素的id，或者在html和js中更改它们，如果你愿意的话）：

<table>
        <tr>
        <td id="letters" onclick ="iterateAlphabet()">

        A
        </td>
        <td> <img src='A.jpg' id="alpha" ></td>
    </table>

使用Javascript：

i = 0;

function iterateAlphabet()
{
  var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  if (i < str.length)
  {
    i++;
    var nextChar = str.charAt(i);

document.getElementById("letters").innerHTML = nextChar;
    document.getElementById("alpha").src = nextChar + '.jpg';



    if (i == str.length - 1)
    {

      i = -1;

    }
  }

}

最重要的是： - 您应该在同一目录中放置名为A.jpg，B.jpg等等的图像......这样就可以了。

当我们点击特定字母时，它应显示相关图像。使用JavaScript

2 个答案: