Question

我有一个小脚本，当点击箭头时显示div。那支箭也会指向下方。但是，当单击箭头将其切换回来时，div会隐藏但箭头会保持不变。是否有一种简单的方法可以让箭头在再次点击后重新弹回？这是当前的代码：

<script language=javascript type='text/javascript'>
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->

</script> 
<script type="text/javascript">
   function changeImg(image_id, image_folder){
   document.getElementById(image_id).src = image_folder;
}
</script>

<a href="javascript:toggle_visibility('<? echo $row2['rfid']; ?>')" onClick="changeImg('image<? echo $i; ?>', '../images/arrow-down.png')"/><img src="../images/arrow-up.png" border="0" id="image<? echo $i; ?>"></a>

谢谢！

Answer 1

在css文件中创建两个具有两个不同图像的类，并在脚本中识别这两个类。

function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       e.setAttribute("class", "class1");
       else
          e.style.display = 'block';
          e.setAttribute("class", "class2");
    }

这是css代码

class1{

  background-image:url('../Content/Images/image1.png');
}
class2{

  background-image:url('../Content/Images/image2.png');
}

Answer 2

你的问题就在这里。

onClick="changeImg('image<? echo $i; ?>', '../images/arrow-down.png')"

单击它时会将图片更改为arrow-down.png，它不会交换它们。

我建议：

var image_prev = 0; //initialises the variable.
function changeImg(image_id, image_folder){
    if(!image_prev){//checks to see if the variable is not set to zero (! stands for not)
        document.getElementById(image_id).src = image_prev; // sets the source to the prev image.
        image_prev = 0;
    }else{
        image_prev = document.getElementById(image_id).src; //stores the link to the prev image
        document.getElementById(image_id).src = image_folder;
}

希望这会有所帮助;

否则你可以谷歌一种方式在JS中切换图像：）

如何制作一个javascript向下箭头？

2 个答案: