Question

我正在制作一个网络项目，并希望通过单击图像（向下箭头图像）来显示表格。和（向上箭头图像）隐藏表。

我正在使用J Query来实现此目的，表格切换正在工作，但图像不起作用。首次单击后，它将图像更改为（源未找到的图像）。但表工作正常。

我正在分享网页的代码和屏幕截图。在这个问题需要帮助，任何类型的帮助都可以解决这个问题谢谢！。[[/ p>

    <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

Answer 1

我想你想要这样的东西：

DEMO

＆＃13;

$(".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 {
	  $("#toggleArrow").attr("src", "https://cdn3.iconfinder.com/data/icons/musthave/256/Stock%20Index%20Down.png");
  }
  $('.displayBlock').toggle("slow");
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你要找的东西真的很简单 JS代码是：document.getElementById("element id here").hiden = true (or false)

element.hidden将返回true或false，并且可以使用上述代码进行更改。

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

如果您需要额外帮助，请发表评论

Answer 3

    <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>

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

3 个答案: