Хотите переключить скрытую таблицу, нажав кнопку Toggled (вверх/вниз стрелка)

Question

Я делаю веб-проект и хочу переключить его, щелкнув изображение (изображение стрелки вниз), чтобы показать таблицу. И (стрелка вверх), чтобы скрыть таблицу.

Я использую 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

Answer 1

Я думаю, что вы хотите что-то вроде этого:

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>

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>