使用 Javascript 更改图像 src答案

【问题标题】：Using Javascript to change an Image src使用 Javascript 更改图像 src
【发布时间】：2013-05-09 21:55:58
【问题描述】：

我有一段非常简单的代码，它应该改变我的 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 (mySrc.src == "1st.png") {
我建议mysrc.getAttribute('src')，因为mysrc.src 属性（通常）返回一个绝对路径，即使属性中的路径是相对的。此外，<label> 用于将表单元素（input、select 或 textarea）与文本标题相关联； <center> 已弃用。

标签： javascript

【解决方案1】：

您正在使用=，这是分配。该值被分配给变量；您想检查 if 语句中的相等性。使用==（它们是否相等？）或===（它们是否相等且类型相同？）。

【讨论】：

【解决方案2】：

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

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

两个 == 表示等于

One = 表示将值设置为

【讨论】：

【解决方案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）而没有后缀，那么代码可能会更简单，因为您甚至不需要名称数组，因为您可以制造旧号码的新名称。

【讨论】：

谢谢；我离做同样的事情还有几分钟的路程（尽管我计划通过各种迭代的改进来逐步解释它们）。您刚刚节省了很多时间，所以+1，谢谢！ =D

【解决方案4】：

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

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

应该阅读

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

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

【讨论】：