onclick 顯示和隱藏不同文本時遇到問題
[英]Having trouble with onclick displaying and hiding differnt text
問題描述
我有一個表格，可以單擊左側列中的文本，右側列中的文本將相應更改。 它應該工作的方式是，當單擊左側的選項之一時，只會出現與所選選項對應的右側文本。 但是，當我單擊左側的選項之一時，它只會隱藏右側的所有文本，而不會顯示我想要查看的部分。
var selectColor = function( element ) { /* Change color of text based on current selection */ prots = document.getElementsByClassName( "prot_id" ); for ( i = 0; i < prots.length; ++i ) { prots.item(i).style.color = 'black'; element.style.color = 'red'; } } var selectProtein = function( element ) { /* Change what info is displayed based on current selection */ var proteinInfo = document.getElementsByClassName( "prot_func" ) ; for( j = 0; j < proteinInfo.length; ++j ) { proteinInfo[j].style['display'] = 'none' ; } var proteinIDs = ["gria1", "gria2", "gria3", "gria4"] ; proteinIDs.forEach(function(entry) { if( element.src.includes(entry)) { var theProtein = document.getElementById(entry) ; theProtein.style['display'] = 'block' ; } }) } <head> <link rel='stylesheet' type='text/css' href='./index.css'> </head> <body> <table> <tr> <td> <p class="prot_id" onclick="selectColor(this); selectProtein(this)">GRIA1_HUMAN</p> <p class="prot_id" onclick="selectColor(this); selectProtein(this)">GRIA2_HUMAN</p> <p class="prot_id" onclick="selectColor(this); selectProtein(this)">GRIA3_HUMAN</p> <p class="prot_id" onclick="selectColor(this); selectProtein(this)">GRIA4_HUMAN</p> </td> <td> <p id="gria1" class="prot_func">...</p> <p id="gria2" class="prot_func">...</p> <p id="gria3" class="prot_func">...</p> <p id="gria4" class="prot_func">...</p> </td> </tr> </table> </body>
2 個解決方案
解決方案1
1 2020-09-30 19:23:46
您遇到了一些問題，因此我更新了您的代碼。
我擺脫了 onclick 並改為使用事件處理程序。
我擺脫了蛋白質數組循環，只是將每個 id 作為數據屬性添加到段落標簽。
而不是基於樣式隱藏/顯示，我只是添加/刪除一個類。
var selectColor = function(element) { /* Change color of text based on current selection */ prots = document.getElementsByClassName("prot_id"); for (i = 0; i < prots.length; ++i) { prots.item(i).classList.remove("active"); } element.classList.add("active") } var selectProtein = function(element) { var proteinInfo = document.getElementsByClassName("prot_func"); for (j = 0; j < proteinInfo.length; ++j) { proteinInfo[j].classList.remove("active"); } theProtein = document.querySelector("#" + element.dataset.id); theProtein.classList.add("active"); } document.querySelectorAll(".prot_id").forEach(function(el) { el.addEventListener("click", function(e) { selectColor(e.target); selectProtein(e.target) }); });
.prot_func { display: none; } .prot_func.active { display: block; } .prot_id.active { color: red; }
<table> <tr> <td> <p class="prot_id" data-id="gria1">GRIA1_HUMAN</p> <p class="prot_id" data-id="gria2">GRIA2_HUMAN</p> <p class="prot_id" data-id="gria3">GRIA3_HUMAN</p> <p class="prot_id" data-id="gria4">GRIA4_HUMAN</p> </td> <td> <p id="gria1" class="prot_func">.1..</p> <p id="gria2" class="prot_func">.2..</p> <p id="gria3" class="prot_func">.3..</p> <p id="gria4" class="prot_func">..4.</p> </td> </tr> </table>
解決方案2
0 2020-09-30 19:44:09
在您的代碼段中，您將根據所選的p標簽內容在右側顯示選項。
所以，如果GRIA1_HUMAN選擇， gria1應該顯示。
您可以使用innerText屬性獲取p內容的值並使用它比較這些值。 我附上了工作示例。
var selectColor = function (element) { /* Change color of text based on current selection */ prots = document.getElementsByClassName("prot_id"); for ( i = 0; i < prots.length; ++i ) { prots.item(i).style.color = 'black'; } element.style.color = 'red'; } var selectProtein = function (element) { /* Change what info is displayed based on current selection */ var proteinInfo = document.getElementsByClassName("prot_func") ; for( j = 0; j < proteinInfo.length; ++j) { proteinInfo[j].style['display'] = 'none' ; } var proteinIDs = ["gria1", "gria2", "gria3", "gria4"] ; const elementText = element.innerText.toLowerCase(); proteinIDs.forEach(function(entry) { if(elementText.includes(entry)) { var theProtein = document.getElementById(entry); theProtein.style['display'] = 'block'; } }); }
<table border="1"> <tr> <td> <p class="prot_id" onclick="selectColor(this); selectProtein(this)">GRIA1_HUMAN</p> </td> <td> <p id="gria1" class="prot_func">...</p> </td> </tr> <tr> <td><p class="prot_id" onclick="selectColor(this); selectProtein(this)">GRIA2_HUMAN</p></td> <td><p id="gria2" class="prot_func">...</p></td> </tr> <tr> <td><p class="prot_id" onclick="selectColor(this); selectProtein(this)">GRIA3_HUMAN</p></td> <td><p id="gria3" class="prot_func">...</p></td> </tr> <tr> <td><p class="prot_id" onclick="selectColor(this); selectProtein(this)">GRIA4_HUMAN</p></td> <td><p id="gria4" class="prot_func">...</p></td> </tr> </table>
無法顯示 JSON
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.