#javascript #html
#javascript #HTML
Вопрос:
У меня есть таблица, в которой можно щелкнуть текст в столбце слева, а текст в столбце справа изменится соответствующим образом. Это должно работать так: при нажатии на одну из опций слева отображается только текст справа, соответствующий выбранной опции. Однако, когда я нажимаю один из своих параметров слева, он просто скрывает весь текст справа и не отображает ту часть, которую я хочу видеть.
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>
Комментарии:
1. Можете ли вы опубликовать более полный фрагмент кода — например, включая определение таблицы html.
Ответ №1:
У вас есть несколько проблем, поэтому я обновил ваш код.
Я избавился от onclick и вместо этого использовал обработчик событий.
Я избавился от цикла белкового массива и просто добавил каждый идентификатор в качестве атрибута данных в теги абзаца.
Вместо того, чтобы скрывать / показывать на основе стиля, я просто добавляю / удаляю класс.
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:
Из вашего фрагмента вы собираетесь отобразить параметры с правой стороны на основе выбранного p
содержимого тега.
Поэтому, если GRIA1_HUMAN
выбрано, gria1
должно отображаться.
Вы можете получить значение p
содержимого, используя innerText
атрибут, и сравнить значения, используя его. Я приложил рабочий пример.
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>