當div隱藏或可見時顯示不同的圖像

Question

我在使用jquery時遇到了一些問題，無法獨自解決。 我有一張圖片，當我單擊該圖片時，div切換了。 我希望隱藏div時圖像為向下箭頭，而當div可見時圖像為向上箭頭。 我的HTML代碼：

<div class="small-3 columns log_message">
   <span id="mesaj_salutare">Welcome!</span><br>
   <span id="account">MY ACCOUNT</span>
   <img id="image_log" src="images/down.png"/>
</div>
<div class="small-4 columns" id="log_form">
     <?php
    //display diffrent code if user is logged or not
    if (isset($_SESSION['id_utilizator']) and isset($_SESSION['email_login'])) {
        require_once 'page_sections/logout.php';
    } else {
        require_once 'page_sections/login_form.php';
    }

     ?>
</div>

我的CSS for log_form：

#log_form{
    margin-top:18px;
    display: none;
    min-height: 200px;
    border: 1px solid #999999;
    position: absolute;
    top: 60px;
    right: 0;
    background: #788dbc;
    z-index: 10;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    font-size: small;
    min-height: 150px;
}

我的JQuery代碼：

$(document).ready(function (){
    $("#image_log").click(function(){
        $("#log_form").toggle(500);
    });
});

因此，讓我們來回顧一下：當頁面開始時， #log_form被隱藏並且#image_log src is = "images/down.png" ，單擊#image_log ， #log_form出現，我需要將#img_log src設置為"images/up.png"

Answer 1

$(document).ready(function (){
    $("#image_log").click(function(){
        $("#log_form").toggle(500,function(){
            if($(this).is(":visible")){
             $("#img_log").attr('src',"images/up.png");
            }
            else{
             $("#img_log").attr('src',"images/down.png");
            }
        });
    });
});

Answer 2

您只需將img src設置為新文件：

$("#image_log[src='down.png']").click(function () {
   $(this).attr("src","up.png")
})

Answer 3

試試這個

$(document).ready(function (){
    $("#image_log").click(function(){
        $("#log_form").toggle(500);
        $(this).attr('src', 
                     $("#log_form").is(":visible") 
                         ? 'images/up.png' 
                         : 'images/down.png');
    });
});