Question

我有一段非常简单的代码可以改变我的img的img src叫做局。这非常简单，我点击函数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。

Answer 1

您正在使用=作为作业。该值将分配给变量;你想在if语句中检查是否相等。使用==（它们是相同的吗？）还是===（它们是否相同且类型相同？）。

Answer 2

所有if (mySrc.src = "image_name") {都应该是

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

两个==表示等于

一个=表示将值设置为

Answer 3

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

无论如何，我会建议一个新的，更紧凑的代码设计，你DRY代码（删除冗余）就像这样。

这解析了字符串中的数字，而不是检查保存所有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）而没有后缀，则代码可能更简单，因为您甚至不需要名称数组，因为您可以从前一个号码制作新名称。

Answer 4

您的问题是，您没有比较if语句中的两个值，而是分配一个值：

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

应该阅读

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

否则你一遍又一遍地将“1st.png”分配给mySrc.src。

使用Javascript更改Image src

4 个答案: