想要通過點擊切換（向上/向下箭頭圖像）來切換隱藏表格

我正在製作一個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）分享的答案。再次感謝隊友 –

想要通過點擊切換（向上/向下箭頭圖像）來切換隱藏表格

回答

相關問題