我看到了類似問題的答案，但它們對我沒有幫助
我有一個按鈕，當點擊它時，會改變按鈕的背景顏色并隱藏/顯示一些內容
HTML
<button class="pro-saved-team-btn" id="{{ teams[loop.index0] | replace(' ', '') 'button' }}"
onclick="show_team('{{ team | replace(' ', '') }}', '{{ team | replace(' ', '') 'button' }}')">
{{ team.title() }}
</button>
HTML 中的 JS
<script>
function show_team(team, team_btn) {
x = document.getElementById(team);
btn = document.getElementById(team_btn);
if (x.style.display === "none") {
x.style.display = "block";
btn.style.backgroundColor = '#1DA1F2';
} else {
x.style.display = "none";
btn.style.backgroundColor = '#161616';
}
}
</script>
我知道該功能有效，但我需要單擊按鈕兩次才能更改背景顏色。
任何人都知道如何解決這個問題，以便只需單擊一下就可以作業？
uj5u.com熱心網友回復：
問題是當事情開始時沒有人設定屬性顯示的樣式。
因此第一輪測驗x.style.display === "none"失敗。
然后代碼將 x.style.display 設定為 'none'。
所以下一次測驗 wprks。
避免在開始更改時將每個樣式顯示設定為無
x.style.display === "none"
到：
x.style.display != "block"
uj5u.com熱心網友回復：
您提供的代碼片段不會重現該問題：
<html>
<html>
<head>
</head>
<body>
<div id="teamId"> hee hee hee </div>
<button id="buttonId" onclick="show_team('teamId','buttonId')">
click
</button>
<script>
function show_team(team, team_btn) {
x = document.getElementById(team);
btn = document.getElementById(team_btn);
if (x.style.display === "none") {
x.style.display = "block";
btn.style.backgroundColor = '#1DA1F2';
} else {
x.style.display = "none";
btn.style.backgroundColor = '#161616';
}
}
</script>
</body>
</html>
您可以執行以下操作：
- 將日志 (
console.log('clicked'))添加到您的函式中，以便確保按鈕接收到您進行的每次點擊 - 如果某些點擊從未到達按鈕，請調查攔截的來源 - 查找您的代碼中是否還有其他地方使用這些按鈕和團隊 ID 執行某些操作
pro-saved-team-btn從按鈕中洗掉類并檢查它是否改變按鈕onclick行為
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/385337.html
標籤：javascript html css 烧瓶 jinja2
下一篇：如何將輸入元素放在兩列中間