0

这里我使用两张图片。当我单击 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>
4

2 回答 2

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上提供

于 2012-04-11T06:36:01.830 回答
0

你不是在告诉它排序。在您的点击代码中，您需要测试图像是向上还是向下显示并相应地进行更改。就像是：

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

但是，通常，通过在单击时添加或删除类并使用 css 设置类的样式会更好地处理此问题。

于 2012-04-11T05:54:21.147 回答