Javascript onclick需要2次點擊

每個div在開始點擊2次後才顯示。每次div初始點擊2次後，每個div showhide只需點擊一次即可運行。 JavaScript和HTMLJavascript onclick需要2次點擊

function showhide() { 
 
    var div = document.getElementsByClassName('search_form')[0]; 
 
    if (div.style.display == "none") { 
 
    div.style.display = "block"; 
 
    } else { 
 
    div.style.display = "none"; 
 
    } 
 
} 
 

 
function showhide2() { 
 
    var div = document.getElementsByClassName('login')[0]; 
 
    if (div.style.display == "none") { 
 
    div.style.display = "block"; 
 
    } else { 
 
    div.style.display = "none"; 
 
    } 
 
} 
 

 
function showhide3() { 
 
    var div = document.getElementsByClassName('carrello')[0]; 
 
    if (div.style.display == "none") { 
 
    div.style.display = "block"; 
 
    } else { 
 
    div.style.display = "none"; 
 
    } 
 
}

.search_form { 
 
    display: none; 
 
    float: right; 
 
} 
 

 
.login { 
 
    display: none; 
 
    float: right; 
 
} 
 

 
.carrello { 
 
    display: none; 
 
    float: right; 
 
}

<div class="login-carrello"> 
 
    <img src="img.png" onClick="showhide();" onmouseover="this.src='img.png'" onmouseout="this.src='gg.png'" width="50px" height="50px"> &nbsp &nbsp 
 
    <img src="img.png" onClick="showhide2()" onmouseover="this.src='img.png'" onmouseout="this.src='img.png'" width="50px" height="50px"> 
 
    <img src="imgt.png" onClick="showhide3()" onmouseover="this.src='img.png'" onmouseout="this.src='img.png'" width="50px" height="50px"> 
 
</div>

都在一個單一的PHP page.Thanks提前。

來源

2017-03-09 Michele

@WesFoster爲什麼他每個圖像需要一個類屬性？ – CaptainHere

您提供的代碼片段每次點擊任何圖像時都會引發錯誤。請用[mcve]更新您的問題，以證明問題。 –

因爲display屬性是不實際設置（雖然它是通過CSS應用），它的初始值是空的（和因此不等於'none'）。如果以相反的順序檢查，它可以工作，但也許更安全的是使用您切換的額外類（使用display屬性）。最小化的示例：

function showhide(cn) { 
 
    var div = document.getElementsByClassName(cn)[0]; 
 
    div.classList.toggle('show'); 
 
}

.login-carrello >img{ 
 
    width:50px; 
 
    height: 50px; 
 
} 
 

 
.search_form,.login, .carrello { 
 
    float: right; 
 
    display: none; 
 
} 
 

 
.show{ 
 
    display:block; 
 
}

<div class="login-carrello"> 
 
    <img src="/wp-content/themes/kyro/img/search.png" onClick="showhide('search_form')"> 
 
    <img src="img.png" onClick="showhide('login')"> 
 
    <img src="imgt.png" onClick="showhide('carrello')"> 
 
</div> 
 

 
<div class="search_form">search_form</div> 
 
<div class="login">login</div> 
 
<div class="carrello">carrello</div>

開始設置.search_form,.login, .carrello是display:none，但添加.show將覆蓋。（我也冒着參數化類名顯示/隱藏的自由，所以只需要一個單一的功能，通過後期綁定可以進一步自動化，但是這個保持非常接近原始狀態）

來源

2017-03-09 17:24:41

非常感謝。各方面的工作:) – Michele

問題出在JavaScript代碼中。由於display屬性最初是在css中設置的，因此div.style.display不會給你none。所以，你必須稍微改變你的代碼。像這樣：

if(div.style.display != "block") 
    div.style.display = "block"; 
else 
    div.style.display = "none";

一旦使用JavaScript代碼設置了display屬性，就可以使用JavaScript讀取它。

來源

2017-03-09 16:55:57

-1

不確定您是在尋找一個雙擊，或只是兩個單獨的點擊。但是，如果雙擊會滿足您的功能性需求，你可以嘗試像以下：

<img src="img.png" ondblclick="showhide2()" onmouseover="this.src='img.png'" mouseout="this.src='img.png'" width="50px" height="50px">

來源

2017-03-09 16:58:57 Jermaya

Javascript onclick需要2次點擊

回答

相關問題