jquery顯示和隱藏不工作，但本地更改爲style.display沒有工作

-1

爲什麼在block/none工作之間切換顯示，但jQuery顯示/隱藏不工作？jquery顯示和隱藏不工作，但本地更改爲style.display沒有工作

的Javascript：

<div style="width: 100px; height: 100px; background-color: red;" 
    onmouseover="document.getElementById('div1').style.display = 'block';" 
    onmouseout="document.getElementById('div1').style.display = 'none';"> 
    <div id="div1" style="display: none;">Text</div> 
</div>

的jQuery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

<div style="width: 100px; height: 100px; background-color: red;" 
    onmouseover="$('#div1').show();" onmouseout="$('#div1').hide();"> 
    <div id="div1" style="display: none;">Text</div> 
</div>

來源

2013-01-05 amirak17

jQuery版本似乎在這裏工作：http://jsbin.com/aruvun/1/ – loganfsmyth

適合我。它必須是別的東西。什麼是整個頁面源代碼？ – Popnoodles

我建議使用jQuery和儘量保持你的CSS（設計），HTML（標記）和JavaScript（交互）總是分開。您將來會避免使用像jQuery這樣的框架出現問題。

下面的代碼是在jQuery中使用鼠標懸停的例子：

$(document).ready(function() { //starts after all html is loaded (after dom is loaded) 
    $('#div1').hide(); 
    $("div.container").mouseover(function() { 
    $('#div1').show(); 
    }).mouseout(function(){ 
    $('#div1').hide(); 
    }); 
});

現在使用CSS樣式：

.container { 
    width: 100px; height: 100px; background-color: red; 
}

其結果是，你的HTML可以semanticly正確的：

<div class="container"> 
    <div id="div1">Text</div> 
</div>

來源

2013-01-05 04:39:14

我同意100％應該避免內聯JavaScript，特別是在使用框架時。但我很確定OP的代碼應該工作正常，除了無效的'src'。 – Anthony

我不喜歡內聯JS，但這不是問題。當頁面加載時，jquery並不尋找$（'＃div1'），它正在尋找它在mouseover上，這應該是非常明顯的描述屬性名稱。 – Popnoodles

嗯，我想這是我的解釋的錯誤部分，因爲屬性onmouseover和onmouseout只有在動作發生時纔會觸發。更改了解釋。它可能是有用的開始腳本 –

它們兩個似乎都是一樣的：

https://tinker.io/62ecc/1

如果你在一個本地文件進行測試時，該瀏覽器可以默認爲src的file方案。使用開發人員工具確認腳本的響應代碼。

來源

2013-01-05 04:40:34 Anthony

忽略http：讓瀏覽器決定是使用http還是https。這完全有效。 - 攪拌機 – mkoryak

URL很好。 – Popnoodles

說到省略http，雖然在網上可以這樣做，但你不應該在電子郵件中這樣做，因爲一些舊版本的outlook不理解它 – mkoryak

如果父格在你的代碼中的第一個div然後ü可以用$('div:first')或可向父，比如一個ID ..

<script> 
    $(function(){ 
    $('#div1').hide(); 
    $('div#Parent').hover(function(){ 
    $('#div1').toggle(); 
    }); 
    }); 
</script> 


<div id="Parent" style="width: 100px; height: 100px; background-color: red;"> 
    <div id="div1">Text</div> 
</div>

使用hover()和toggle()讓你的代碼簡潔，對等同你需要的事件。

來源

2013-01-05 05:02:19 Rohit416

嗯，我不知道相同/任何答案已經給與否，因爲我寫的時候我切換標籤做其他重要的工作。 – Rohit416

我已經編輯帖子，現在它的工作頁面加載也。 – Rohit416

哦，我appolozise不從div1刪除'display：none'屬性。我現在編輯。 – Rohit416

jquery顯示和隱藏不工作，但本地更改爲style.display沒有工作

回答

相關問題