Question

这里我使用了两张图片。当我在Sort_down.png图像上单击一次然后它变为Sort_up.png。当我再次点击此图片时，它不会改回Sort_down.png，我该如何实现？

 <script type="text/javascript">
function clkimg() {
        var img = document.getElementById('stCodeDSC');
                img.src = '../Images/sort_up.png';

        }
  </script>


    <td width="11%" bgcolor="#C5DEFF" class="menu_header">
    <div align="center" onclick="clkimg();" > 
    <img name="stCodeDSC"  class="img" src="../Images/Sort_down.png"  id="stCodeDSC">
  </div>
 </td>

Answer 1

根据您使用的浏览器，当图像源设置为相对URL时，将其读回将为您提供绝对URL。如果要使用切换，可以在源中检查字符串，例如：

function clkimg() {
  var img = document.getElementById('stCodeDSC'),
      nextImg = img.src.indexOf('up.png')>0 ? 'down':'up';
  img.src = '../Images/sort_' + nextImg + '.png';
}

如果sort_up和sort_down图像实际上只是标识当前排序的向上或向下状态，您可以将这两个图像合并为一个，并将它们用作使用CSS显示的精灵。更多详细信息将在https://stackoverflow.com/search?q=css+sprite

上提供

Answer 2

你没有告诉它要整理。在您的点击代码中，您需要测试图像是显示还是显示，并相应地进行更改。类似的东西：

if(img.src === '../Images/sort_up.png')
    img.src = '../Images/sort_down.png';
else
    img.src = '../Images/sort_up.png';

但是，通常情况下，通过在css上添加或删除类以及使用css为类设置样式可以更好地处理这个问题。

如何在点击图像时交换图像？

2 个答案: