使用Javascript更改图像src

Using Javascript to change an Image src

本文关键字：图像 src Javascript 使用      更新时间：2023-09-26

我有一段非常简单的代码，它应该改变我的img的img src称为innings。这很简单，onclick我调用函数changeImage，并根据图像的当前src，我将其更改为图像的下一次迭代。代码如下所示:

    <script type="text/javascript" >
        function changeImage() {
            var mySrc = document.getElementById('inning');
            alert(mySrc.src);
            if (mySrc.src = "1st.png") {
                alert('im in here');
                mySrc.src = "2nd.png";
            }
            else if (mysrc.src = "2nd.png")
                mysrc.src = "3rd.png";
            else if (mysrc.src = "3rd.png")
                mysrc.src = "4th.png";
            else if (mysrc.src = "4th.png")
                mysrc.src = "5th.png";
            else if (mysrc.src = "5th.png")
                mysrc.src = "6th.png";
            else if (mysrc.src = "6th.png")
                mysrc.src = "7th.png";
            else if (mysrc.src = "7th.png")
                mysrc.src = "8th.png";
            else if (mysrc.src = "8th.png")
                mysrc.src = "9th.png";
            else if (mysrc.src = "9th.png")
                mysrc.src = "10th.png";
            else if (mysrc.src = "10th.png")
                mysrc.src = "1st.png";
        }
    </script>
</head>
<body>
    <center>      <label>SlowPitch Player Rotation</label></center>
    <br /><br />
    <Center>
        <img id="inning" src="1st.png" 
                onclick='changeImage()' />
    </Center>

现在我遇到的问题是，每次我点击图像，changeImage()函数击中警报，让我知道src仍然是1st.png;同时，我的第一个警报告诉我，我有2nd.png作为我的src。

您正在使用=，这是分配。这个值被赋给了变量;在if语句中检查是否相等。使用==(它们是否相等?)或===(它们是否相等且类型相同?)

所有if (mySrc.src = "image_name") {应为

if (mySrc.src == "1st.png") {

2 ==表示等于

1 =表示将值设置为

正如其他人所说，你的主要问题是没有使用正确的===或==进行比较，引用.src属性将返回一个绝对路径，所以你的比较可能也不会因为这个原因而起作用。

无论如何，我建议一个新的和更紧凑的代码设计，你干你的代码(删除冗余)像这样。

这将从字符串中解析数字，而不是检查精确匹配，从而节省所有if/else比较，一旦您有了数字，您可以通过直接索引到名称数组来获得下一个名称。

<script type="text/javascript" >
    function changeImage() {
        var names = ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th", "10th"];
        var mySrc = document.getElementById('inning');
        // parse the number out of the existing .src string
        var matches = mySrc.src.match(/('d+).*?'.png$/);
        if (matches) {
            // since array is 0 indexed and names are 1 indexed, we don't need to add one
            // as it is already one more than it was
            var num = parseInt(matches[1], 10);
            if (num >= names.length) {
                num = 0;
            }
            mySrc.src = names[num] + ".png";
        }
    }
</script>

仅供参考，如果您的文件名中只有数字(如img1.png)而没有后缀，那么代码可能会更简单，因为您甚至不需要名称数组，因为您可以从前一个数字中生成新名称。

你的问题是，你没有比较两个值在你的if语句，而是分配一个值:

if (mySrc.src = "1st.png")

应该读

if (mySrc.src === "1st.png")

否则将"1st.png"赋值给mySrc。

相关文章：