HTML/JavaScript的 - 巴頓需要兩次點擊執行click事件

測試出一個簡單的切換顯示，但是，它需要兩次點擊即可切換顯示的第一次。之後它在一個。HTML/JavaScript的 - 巴頓需要兩次點擊執行click事件

<html> 
<head> 
<style> 
#carousel{border:2px solid blue; 
width:1280px; 
height:720px;} 

#p2{visibility:hidden;} 

#p1{display:block;} 

#btn{position:absolute; 
    top:2000px;} 
</style> 

<script src="mainScript.js"></script> 
</head> 

<body> 

<div id="carousel"> 
    <img id="p1" src="pic1.jpg"> 
    <img id="p2" src="pic2.jpg"> 
</div> 

<button type="button" id="button" onclick="clickEvent()">Click</button> 

</body> 
</html>

這裏是我的javascript：

function clickEvent(){ 
var p = document.getElementById("p1"); 
if(p.style.display == "block") 
    p.style.display = "none"; 
else 
    p.style.display = "block"; 
}

應該我使用jQuery的沒有，因爲所有其他的問題，我發現這個是jQuery的相關注意。

來源

2012-12-31 EpicPineapple

看看這個[小提琴]（http://jsfiddle.net/qYyy8/）我放在一起。我測試你的代碼和剛添加的的JavaScript在HTML的''標籤的腳本標記和奇妙地爲我工作。 ic3b3rg的回答很好地簡化了你的代碼，但是從jsfiddle的樣子看來，它的代碼似乎正常工作。我在Chrome中進行了測試。你可能會檢查你的引用''是否指向正確的位置。 – War10ck

試過，並沒有奏效。而我的mainScript.js確實是在正確的地方。在幾個瀏覽器中測試過，全都做同樣的事情 – EpicPineapple

我在之前的評論中發現了一個問題。有關更多詳情，請參閱下面的答案。 – War10ck

我有一個更新我以前的小提琴張貼在我的評論上面。在進一步測試雙擊之後，我以前的小提琴仍然遇到同樣的問題。

經過一段時間後，初始顯示值將返回爲""而不是block。我不知道爲什麼它不把你的價值，你在<head></head>部分設置，但如果你內嵌它像這樣：

<img id="p1" src="pic1.jpg" style="display: none;" />

它正常工作的第一次，只有一個點擊按鈕的。

這是我的新更新fiddle演示這一點。

我打算詳細瞭解爲什麼你的樣式在<head></head>部分，但現在，這裏是一個快速（和半原始）修復。

希望這有助於和好運！

來源

2012-12-31 16:40:40 War10ck

這個修好了，非常感謝！我所做的只是將「塊」更改爲「內聯」。每個人都非常有幫助，這是使用堆棧溢出的第一次精彩體驗。 – EpicPineapple

很高興工作。快樂的編碼和新年快樂！ – War10ck

默認的顯示屬性是「內聯」，所以你的邏輯沒有考慮到這一點。這是改變它在第一次運行該塊，所以它仍然是可見的，則隱藏它的第二次點擊（設置顯示爲none）

來源

2012-12-31 16:22:27

OP正在設置初始顯示值。 I.E.他用#p1 {display：block;}覆蓋內嵌＃ – War10ck

如果你看看CSS，我已經將p1元素的display屬性設置爲block。編輯：沒有看到war10cks評論 – EpicPineapple

'p.style.display'實際上會在Firefox第一次讀取時返回一個空字符串。 – Ben

function clickEvent(){ 
var p = document.getElementById("p1"); 
if(p.style.display == "none") 
    p.style.display = "block"; 
else 
    p.style.display = "none"; 
}

您還可以簡化事情有點：

p.style.display = p.style.display == "none" ? "block" : "none";

來源

2012-12-31 16:22:58 ic3b3rg

得愛三元操作員+1 – War10ck

-1

同樣的問題可以通過只需更換"block" : "none";?"none" : "block"; 解決，您不需要雙擊第一次切換按鈕，單擊將工作。

來源

2016-11-28 10:22:49

HTML/JavaScript的 - 巴頓需要兩次點擊執行click事件

回答

相關問題