想要通过点击切换（向上/向下箭头图像）来切换隐藏表格

我正在制作一个web项目，并希望通过单击图像（向下箭头图像）来切换显示表格。和（向上箭头图像）来隐藏表格。想要通过点击切换（向上/向下箭头图像）来切换隐藏表格

我为此使用J Query，表切换正在工作，但图像不工作。第一次点击后，将图像更改为（未找到源图像）。但表格工作正常。

我在分享网页的代码和屏幕截图。！！需要在这个问题上的帮助，任何形式的援助将是明显的解决这个问题谢谢[

<script type="text/javascript"> 
 
     $(document).ready(function (e) { 
 
      $('#show1').click(function() { 
 
       
 
       if ($("#show1",this).attr("src") == "~/Images/arrow1.png") 
 
       { 
 
        $("#show1").attr("src", "~/Images/rarrow1.png"); 
 
       } 
 
       else { 
 
        $("#show1").attr("src", "~/Images/arrow1.png"); 
 
       } 
 
        $('#show-list1').toggle("slow"); 
 
      }); 
 
     }); 
 
    </script>

<img style="margin-left:400px" align="right" height="20" width="25" id="show1" src="~/Images/arrow1.png" /> 
 

 

 
// 2nd image source is "~/Images/rarrow1.png"

] 1

来源

2015-06-14 Farzan Mehdi

我是新来堆流量，没有信誉，不能添加屏幕截图。它更容易通过这个问题的屏幕截图了解，无论如何..... –

我想你想是这样的：

DEMO

$(".displayBlock").hide(); 
 
$('#toggleArrow').click(function() { 
 
    var imageElement = document.getElementById('toggleArrow'); 
 
    if (imageElement.src.indexOf("https://cdn3.iconfinder.com/data/icons/musthave/256/Stock%20Index%20Down.png") != -1) { 
 
     $("#toggleArrow").attr("src", "https://cdn3.iconfinder.com/data/icons/musthave/256/Stock%20Index%20Up.png"); 
 
    } else { 
 
\t $("#toggleArrow").attr("src", "https://cdn3.iconfinder.com/data/icons/musthave/256/Stock%20Index%20Down.png"); 
 
    } 
 
    $('.displayBlock').toggle("slow"); 
 
});

#toggleArrow { 
 
    float:right; 
 
    margin-right:40px; 
 
} 
 
img { 
 
    width:20px; 
 
    height:30px; 
 
    cursor:pointer; 
 
} 
 
.displayBlock { 
 
    position:absolute; 
 
    top:100px; 
 
    right:15px; 
 
    padding:10px; 
 
    background:#ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<img src="https://cdn3.iconfinder.com/data/icons/musthave/256/Stock%20Index%20Down.png" alt="Image Down" id="toggleArrow" /> 
 
<div class="displayBlock"> 
 
    <p>Hey, there i am display block</p> 
 
    <p>I get toggle on Arrow clicks</p> 
 
</div>

来源

2015-06-14 18:14:40 divy3993

非常感谢你为这个答案，工作完美。 “if”勾选“（src.indexOf）”帮助了我很多。非常感谢您的帮助。 :) –

很高兴它为你工作！ – divy3993

你在找什么，真是简单
的JS代码：document.getElementById("element id here").hiden = true (or false)

element.hidden将返回使用上面的代码，通过true或false，并且可以改变。

例如，看看这个的jsfiddle：http://jsfiddle.net/ProgrammerKid/ywj7w0sp/

，如果你需要额外的帮助，只是发表评论

来源

2015-06-14 18:22:52

谢谢你的帮助@（Viraj Shah），但我遇到了与表格切换不同的问题。但现在它的工作。 –

代码： <脚本类型= “文本/ JavaScript的”> $（文件）。就绪（函数（e）中{ $（ '＃秀王'）上单击（函数（）{ VAR imageElement =文档。 getElementById（'show1'）; if（imageElement.src.indexOf（“Images/arrow1.png”）！= -1）{（“＃show1”）。attr（“src”，“Images/rarrow1。（“＃show1”）。attr（“src”，“Images/arrow1.png”）; } $（'＃show-list1'）。toggle（“slow” ）; }）; }）; –

其好代码现在可以运行 –

<script type="text/javascript"> 

    $(document).ready(function (e) { 
     $('#show1').click(function() { 
      var imageElement = document.getElementById('show1'); 
      if (imageElement.src.indexOf("Images/arrow1.png") != -1) { 
       $("#show1").attr("src", "Images/rarrow1.png"); 
      } else { 
       $("#show1").attr("src", "Images/arrow1.png"); 
      } 
      $('#show-list1').toggle("slow"); 
     }); 

    }); 

</script>

来源

2015-06-14 19:45:17

这是我编辑的脚本根据（@ divvy3993）分享的答案。再次感谢队友 –

想要通过点击切换（向上/向下箭头图像）来切换隐藏表格

回答

相关问题