jQuery隱藏和顯示Attr Src圖像不按預期切換

所以我搜索了周圍並編輯了我找到的顯示/隱藏jquery代碼，它工作得很好，除非在點擊它時html img屬性不會被替換。jQuery隱藏和顯示Attr Src圖像不按預期切換

我的jQuery代碼：

<script> 
$(document).ready(function() { 

    var button = $('#hideButton'); 

    //check the cookie when the page loads 
    if ($.cookie('currentToggle') === 'hidden') { 
     togglePanel(button, false); 
    } 
    else { 
     togglePanel(button, true); 
    } 

    //handle the clicking of the show/hide toggle button 
    button.click(function() { 
     //toggle the panel as required, base on current state 
     if (button.attr('src') === "images/expand.gif") { 
      togglePanel($(this), true); 
     } 
     else { 
      togglePanel($(this), false); 
     } 
    }); 

}); 

function togglePanel(button, show) { 

    var panel = $('#panel'); 

    if (show) { 
     panel.removeClass('hidden'); 
     button.attr('src','images/collapse.gif'); 
     $.cookie('currentToggle', '', { path: '/' }); 
    } 
    else { 
     panel.addClass('hidden'); 
     button.attr('src','images/expand.gif'); 
     $.cookie('currentToggle', 'hidden', { path: '/' }); 
    } 
} 
</script>

我的HTML代碼：

<a id="hideButton" href="#"><img src="images/collapse.gif"></a> 
<div id="panel"> 
    <p> 
    Test 
    </p> 
</div>

當我看着我的螢火控制檯，它顯示了A HREF src屬性改變，像這樣「<a ... src="extend.gif">」，而不是實際的「<img src="">」元素本身。我該如何解決？謝謝。

來源

2013-10-08 Momololo

你這樣做了艱辛的道路。 UI元素應該使用CSS背景，而不是內嵌圖像。然後你可以簡單地通過交換CSS類名來改變圖像。 –

正如我之前所說，並且會再說一遍，不要只是複製和粘貼別人的代碼。即使你編輯它，你也不會明白他想要實現什麼。研究代碼並寫下你需要的元素。 – nkmol

感謝提示Diodeus，我會這樣做。 – Momololo

使您的功能正常工作 - 您需要將其更改爲更新IMG元素的src屬性。沒有錨標記......你能做到這一點，像這樣：

function togglePanel(button, show) { 

    var panel = $('#panel'); 

    if (show) { 
     panel.removeClass('hidden'); 
     button.find('img').attr('src','images/collapse.gif'); 
     $.cookie('currentToggle', '', { path: '/' }); 
    } 
    else { 
     panel.addClass('hidden'); 
     button.find('img').attr('src','images/expand.gif'); 
     $.cookie('currentToggle', 'hidden', { path: '/' }); 
    } 
}

的.find（「IMG」）將返回子對象的參數選擇匹配 - 爲你調用它的元素.. 。在這種情況下，錨點標籤存儲在您的可變按鈕...

我想要注意的幾件事：交換src屬性可能是有效的，但你會注意到一個「閃爍」在較慢的互聯網連接或作爲圖像尺寸變大。這是因爲您實際上正在讓用戶發出請求並加載該圖像。

推薦的方法是做到這一點像Diodeus說 - 利用CSS類和我更傾向於將圖像精靈 - 這將否定「閃蒸」，並儘量減少資源的加載時間的DOM完成加載後。

編輯：

RafH有一個好點！ - 你還必須更新if條件（我忽略）來檢查圖像源 - 而不是錨源。他建議

來源

2013-10-08 20:40:21 Joe

感謝提示喬。我已經得到了CSS的工作，儘管最初的崩潰圖像消失與CSS背景。所以我會先試着弄清楚，如果它能正常工作，那麼我只需要使用CSS。 – Momololo

按鈕指的是一個標籤，如果你想改變IMG SRC，那麼你需要使用正確的選擇：

$('img',button).attr('src', 'whatever.gif');

在您的代碼：

if (button.attr('src') === "images/expand.gif") {

應是：

if ($('img', button).attr('src') === "images/expand.gif") {

您還需要在togglePanel函數中執行同樣的操作。

來源

2013-10-08 20:40:36 RafH

RafH好點！ - 他還必須更新if條件以檢查圖像源 - 而不是錨點源 – Joe

對不起，如果我沒有正確理解你的問題。當點擊錨時，您想要顯示/隱藏面板，點擊時也會改變圖像。

爲什麼不爲錨本身做一個佈局並使用後臺url來改變它？

#hideButton 
{ 
    width: 25px; 
    height: 25px; 
    display: inline-block; 

    background: url('http://png.findicons.com/files/icons/2338/reflection/128/collapse_arrow.png'); 
    background-size:25px 25px; 
} 

.reverse 
{ 
    -moz-transform: scaleY(-1); 
    -o-transform: scaleY(-1); 
    -webkit-transform: scaleY(-1); 
    transform: scaleY(-1); 

    //you can place a other image in here. 

    margin-bottom: 2px; 
}

現在我已經在點擊時使用了鏡像圖片，你可以使用任何你想要的圖片。

現在jQuery代碼：

$(document).ready(function() { 
    $("#hideButton").click(function() 
    { 
     if($("#panel").is(":visible")) 
     { 
      $('#panel').slideUp('slow'); 
      $('#hideButton').addClass('reverse'); 
     } 
     else 
     { 

      $('#panel').slideDown('slow'); 
      $('#hideButton').removeClass('reverse');    
     } 
    }) 
})

我用the premade animation效果基本show和了slideDown。再次，你可以改變你的需求。

終於HTML：

<a id="hideButton" href="#" ></a> 
<div id="panel"> 
    <p> 
    Test 
    </p> 
</div>

jsFiddle

來源

2013-10-08 20:54:53 nkmol

jQuery隱藏和顯示Attr Src圖像不按預期切換

回答

相關問題