爲什麼我必須點擊兩次按鈕才能工作，我該如何解決這個問題？

除非我連續單擊了兩次按鈕，否則該函數將完美地執行。爲什麼我必須點擊兩次按鈕才能工作，我該如何解決這個問題？

function hideable(id) { 
 
    var e = document.getElementById(id); 
 
    if (e.style.display == 'inline-block') 
 
    e.style.display = 'none'; 
 
    else 
 
    e.style.display = 'inline-block'; 
 
}

<img class="user_upload" src="upload/0000000000.gif" alt="1024 KB, 500x309" title="1024 KB, 500x309" id="0000000000"> 
 
<span id="hide_image" onclick="hideable('0000000000');">hide image</span>

編輯：對不起，我應該已經指定。下面是我已經使用CSS，但它仍然當你標記這個問題jQuery你可以做同樣的事情在jQuery的簡單很多不工作（即使inline-block的）

img.user_upload { 
height: 75px; display: inline-block; float: left; 
margin: 0px 20px 10px 0px;}

來源

2014-10-01 Brennan

只需在你的''標籤中添加**'style =「display：inline-block」'**。它會工作完美。 **例如**' 1024 KB, 500x309 ' – prog1011 2014-10-01 11:41:55

因爲你
<img class="user_upload" src="upload/0000000000.gif" alt="1024 KB, 500x309"title="1024 KB, 500x309" id="0000000000">
已經不包含一個顯示樣式，它在if語句中返回null nd正在觸發你的其他情況。

嘗試：

<img class="user_upload" src="upload/0000000000.gif" alt="1024 KB, 500x309" title="1024 KB, 500x309" id="0000000000" style="display:inline-block">

現在，當你運行它，它會識別出有一個元素，將設置樣式爲無。

來源

2014-10-01 11:32:34 Zze

這工作完美，因爲我有不同ID的多個部分，這是更新代碼的最合適的方式。謝謝！ – Brennan 2014-10-01 11:44:23

：

$('#hide_image').click(function() { 
    $(this).prev('img').toggle(); 
});

onclick屬性可能是維護噩夢。更好地連接在你處理它的同一個地方的事件。

toggle負責可見性檢查，以便您不會遇到這些問題。

的jsfiddle：http://jsfiddle.net/TrueBlueAussie/ztgLom3p/

要對多個按鈕的作用，在跨度使用一個類而不是ID的：

的jsfiddle：http://jsfiddle.net/TrueBlueAussie/ztgLom3p/1/

$('.hide_image').click(function() { 
    $(this).prev('img').toggle(); 
});

的jQuery真的是要走的路如果你已經在頁面中有它。該代碼通常比等效的原始JavaScript更短，更易於閱讀和維護。

來源

2014-10-01 11:31:33

哇，謝謝！棒極了！ – Brennan 2014-10-01 11:39:07

@Brennan：如果您使用類選擇器而不是ID，則它將一次處理所有按鈕，因爲導航是相對於所單擊的項目的。我會用一個例子來更新。 – 2014-10-01 11:46:52

因爲你沒有設置你的圖像的顯示，以內嵌模塊..

<img class="user_upload" src="http://placehold.it/350x150" alt="1024 KB, 500x309" title="1024 KB, 500x309" id="0000000000" style="display:inline-block">

修復該問題

See the DEMO here

來源

2014-10-01 11:32:34

看起來您的圖片在頁面加載時沒有顯示「內嵌塊」。加入這樣的事情你的CSS文件：

img.user_upload { display: inline-block;}

來源

2014-10-01 11:32:43 Keith

是的，圖像的標準diplay屬性是「inline」 - 而不是「inline-block」 – 2014-10-01 11:33:45

UPDATE：好像圖像甚至沒有一個標準的顯示屬性。至少你不能用e.style.display來閱讀。
開頭顯示屬性設置，所以你必須改變你的條件：

function hideable(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'inline-block' || e.style.display == '') 
     e.style.display = 'none'; 
    else if(e.style.display == 'none') 
     e.style.display = 'inline-block'; 
}

的jsfiddle：圖像http://jsfiddle.net/v4sc6mtb/1/

~~標準的顯示屬性是inline - 這應該爲這兩種情況下工作：~~

來源

2014-10-01 11:35:01

爲什麼我必須點擊兩次按鈕才能工作，我該如何解決這個問題？

回答

相關問題