0

ここでは 2 つの画像を使用します。Sort_down.png 画像を 1 回クリックすると、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 の画像が、現在の並べ替えの状態を示すだけのアイコンである場合、2 つの画像を 1 つに結合し、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 に答える