使用 JavaScript 更改图像源

IT技术 javascript image onclick src
2021-02-13 11:19:45

所以我是 JavaScript 的新手（这实际上是我第一次尝试做一些事情）并且我遇到了一些麻烦。我以为我有足够的知识来完成这项工作，我什至在谷歌上搜索了可以帮助我解决这个问题的教程和脚本，但没有任何帮助。

我似乎无法更改图像源，这是我迄今为止的代码：

    function changeImage(a) {
        document.getElementById("img").src=a.src;
    }

    <div id="main_img">
        <img id="img" src="1772031_29_b.jpg">
    </div>
    <div id="thumb_img">
        <img src='1772031_29_t.jpg'  onclick='changeImage("1772031_29_b.jpg");'>
        <img src='1772031_55_t.jpg'  onclick='changeImage("1772031_55_b.jpg");'>
        <img src='1772031_53_t.jpg'  onclick='changeImage("1772031_53_b.jpg");'>
    </div>

如果我做错了什么，有人可以解释一下吗？或者也许我错过了什么？请帮帮我 ：-）

6个回答

function changeImage(a)所以没有a.src=> 之类的东西，只需使用a.

演示在这里

我也错过了 " " 就像 ShaneC 说的嘿嘿，但我看到你也把它添加到了演示中。非常感谢你
2021-03-16 11:19:45

如果您将始终使用该模式_b而不是_t您可以通过传递对图像本身的引用来使其更通用：

onclick='changeImage(this);'

然后在函数中：

function changeImage(img) {
    document.getElementById("img").src = img.src.replace("_t", "_b");
}
@ErnestasGruodis 可能更简单，但这是错误的。作为开发人员，依靠浏览器来修复我们的错误是不好的做法。
2021-04-09 11:19:45
会更简单：function changeImage(img) { img.src = img.src.replace("_t", "_b"); }. 在 FF34.0.5 上测试
2021-04-11 11:19:45
是的，这也解决了它，代码在 HTML 部分看起来更清晰。谢谢你。
2021-04-12 11:19:45

您唯一真正的问题是您传递的是字符串，而不是具有.src属性的对象

一些建议：

  • 使用自然可点击的元素触发器，例如 <button>
  • data-为元素上的事件数据使用前缀属性
  • 当 DOM 准备好时使用后期绑定事件。

标记：

<div id="main_img">
  <img id="img" src="1772031_29_b.jpg">
</div>
<ul id="thumb_img">
  <li><button data-src='1772031_29_b.jpg'><img src='1772031_29_t.jpg' /></button></li>
  <li><button data-src='1772031_55_b.jpg'><img src='1772031_55_t.jpg' /></button></li>
  <li><button data-src='1772031_53_b.jpg'><img src='1772031_53_t.jpg' /></button></li>
</ul>

JavaScript：

如果您需要支持 IE 和其他旧版浏览器，请为 Array.from使用适当的 polyfill

function clickedButton(btn, event) {
  document.getElementById('img').src = btn.getAttribute('data-src');
}

function bindClick(btn) {
  btn.addEventListener('click', clickedButton.bind(null,btn));
}

// Setup click handler(s) when content is loaded
document.addEventListener("DOMContentLoaded", function(){
  Array.from(document.querySelectorAll('#thumb_img > button'))
    .forEach(bindClick));
});

编辑：适用于现代浏览器的 Vanilla JS。

您有一些更改（这假设您确实仍然希望使用 IMG 的 ID 更改图像，如果不使用 Shadow Wizard 的解决方案）。

删除a.src并替换为a：

<script type="text/javascript">
function changeImage(a) {
    document.getElementById("img").src=a;
}
</script>

更改您的onclick属性以包含新图像源的字符串而不是文字：

onclick='changeImage( "1772031_29_b.jpg" );'
我应该知道最好不要添加那些撇号 ^^ 谢谢！
2021-03-17 11:19:45

我也管那个问题。但是每次更改源（图像）时，都可以通过图像的实例来解决它。

似乎只调用一次 onload 。但是这样，您可以随时更改图像。

function chageIcon(domImg,srcImage)
    {
        var img = new Image();
        img.onload = function()
        {
            // Load completed
            domImg.src = this.src;
        };
        img.src = srcImage;
    }

模式使用。

chageIcon(document.getElementById("img"),"newIcon.png");
其它你可能感兴趣的问题
上一篇JavaScript：查找 DIV 的行高，不是 CSS 属性而是实际行高 下一篇如何克服 HTMLUnit ScriptException？