如何在javascript中切换图像位置

How to toggle image location in javascript?

本文关键字：图像 位置 javascript      更新时间：2023-09-26

我想让它，如果你点击一个图像，它改变它的来源，如果你再次点击它，它改变回来。

<img 
    src="http://images.clipartpanda.com/laughing-smiley-face-clip-art-smiley-face-clip-art10.jpeg" 
    longdesc="http://smileyfaceplace.weebly.com/uploads/6/9/7/1/6971266/9884860_orig.jpg"
    width="400"
    id="smiley"
    onClick = "toggleHide('smiley');"
/>

脚本:

function toggleHide(ImgId) {
        var image = document.getElementById(ImgId).src;
        document.getElementById(ImgId).src = document.getElementById(ImgId).longdesc;
        document.getElementById(ImgId).longdesc = image;
        alert(document.getElementById(ImgId).longdesc);
    }

我做错了吗?当我运行下面的代码时，交换确实可以工作，但是替代图像显示为未定义。

我使用longdesc属性，因为它看起来是良性的，是一个有效的属性，但如果可能的话，我更愿意使用我自己的make属性。

编辑:谢谢伙计，它现在工作了:

<img 
    src="http://images.clipartpanda.com/laughing-smiley-face-clip-art-smiley-face-clip-art10.jpeg" 
    altsrc="http://smileyfaceplace.weebly.com/uploads/6/9/7/1/6971266/9884860_orig.jpg"
    width="400"
    id="smiley"
    onClick = "toggleHide('smiley');"
/>

脚本:

    function toggleHide(ImgId){ 
        var image = document.getElementById(ImgId);
        var oldsrc = image.src;
        image.src = image.getAttribute('altsrc');
        image.setAttribute('altsrc', oldsrc);
        //alert(document.getElementById(ImgId).longdesc);
    }

longdesc属性需要为camelcase: 

function toggleHide(ImgId){
        var image = document.getElementById(ImgId).src;
        document.getElementById(ImgId).src = document.getElementById(ImgId).longDesc;
        document.getElementById(ImgId).longDesc = image;
        //alert(document.getElementById(ImgId).longdesc);
    }
<img 
    src="http://images.clipartpanda.com/laughing-smiley-face-clip-art-smiley-face-clip-art10.jpeg" 
    longdesc="http://smileyfaceplace.weebly.com/uploads/6/9/7/1/6971266/9884860_orig.jpg"
    width="400"
    id="smiley"
    onClick = "toggleHide('smiley');"
/>

更好的方法

还是那句话，最好使用自定义的data-属性:

function toggleHide(ImgId) {
  var img = document.getElementById(ImgId);
  var tmp = img.src;
  img.src = img.getAttribute('data-alt');
  img.setAttribute('data-alt', tmp);
}
<img src="http://images.clipartpanda.com/laughing-smiley-face-clip-art-smiley-face-clip-art10.jpeg" 
     data-alt="http://smileyfaceplace.weebly.com/uploads/6/9/7/1/6971266/9884860_orig.jpg" 
     width="400" id="smiley" onClick="toggleHide('smiley');" />

因为img没有称为longdesc的属性，您需要将其作为属性读取。

也可以将图像元素引用传递给toggleHide，这样就可以避免多次调用document.getElementById() 

function toggleHide(el) {
  var image = el.src;
  el.src = el.getAttribute('longdesc');
  el.setAttribute('longdesc', image);
}
<img src="http://images.clipartpanda.com/laughing-smiley-face-clip-art-smiley-face-clip-art10.jpeg" longdesc="http://smileyfaceplace.weebly.com/uploads/6/9/7/1/6971266/9884860_orig.jpg" width="400" id="smiley" onClick="toggleHide(this);" />

注意:即使你已经标记它使用jQuery，因为你的解决方案没有使用jQuery，我也没有使用jQuery。

jquery的解决方案将是

jQuery(function($) {
  $('.toggle-hide').click(function() {
    var image = this.src,
      $this = $(this);
    this.src = $this.data('toggle-src');
    $this.data('toggle-src', image);
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="http://images.clipartpanda.com/laughing-smiley-face-clip-art-smiley-face-clip-art10.jpeg" data-toggle-src="http://smileyfaceplace.weebly.com/uploads/6/9/7/1/6971266/9884860_orig.jpg" width="400" class="toggle-hide" />

相关文章：